Comment vider la classe css du composant racine dans son composant enfant - Angular 2?

Question

J'ai 3 composants dans l'application angulaire 2. Le class="container-fluid content" est classe css dans l'application.component.html. Ce class="container-fluid content" est un CSS par défaut pour les autres composants. Maintenant, je veux définir background-color:blue dans le composant de détail. J'ai essayé de mettre en detail.component.ts comme ça styles:['.container-fluid content{background-color: blue;}'] Cela n'a pas fonctionné. Si je mets dans app.component.html comme ceci <div class="container-fluid content" style="background-color: blue;"> Il s'applique aux deux composants. Comment remplacer cette classe = "contenu de conteneur-fluide" dans le composant de détail? Avez-vous essayé avec la liaison de l'hôte et en ajoutant une nouvelle classe là-bas?

//my project structure 

app 
    - app.component.html 
    -app.component.ts 
- welcome 
    -welcome.component.html 
    -welcome.component.ts 
- detail 
    -detail.component.html 
    -detail.component.ts 

//app.component.html 
<div class="container-fluid content"> 
    <router-outlet></router-outlet> 
    </div> 
    <app-footer></app-footer> 
</div> 

//welcome.component.html 
<h1>welcome page heading</h1> 
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px; 
padding-top: 25px; margin: auto;justify-content: center" > 
<md-card> 
      <md-card-content> 
      <h1></h1> 
      <h2></h2> 
      <h2> 
      </h2> 
      </md-card-content> 
      </md-card> 
     </div> 

//detail.component.html 
<h1>Details page heading</h1> 
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px; 
padding-top: 25px; margin: auto;justify-content: center" > 
<md-card> 
      <md-card-content> 
      <h1></h1> 
      <h2></h2> 
      <h2> 
      </h2> 
      </md-card-content> 
      </md-card> 
     </div> 
//detail.component.ts 
import { OnInit, Component } from '@angular/core'; 
import { DetailService } from '../detail/detail.service'; 
import { HostBinding} from '@angular/core'; 

@Component({ 

    providers: [DetailService ] 
    templateUrl: './detail.component.html', 
    styles: ['h3 {margin:5px}'] 

}) 

export class DetailComponent implements OnInit { 

@HostBinding('class.blueClass') blue: boolean = false; 

    constructor(private _detailService: DetailService) { } 

    ngOnInit() { 

this.blue = true; 
} 
} 

Answer 1

@HostBinding('class.blueClass') blue: boolean = false; 

Et dans le deuxième composant, il suffit d'activer onInit?

ngOnInit() { 
    this.blue = true; 
} 

L'autre façon pourrait être dans la définition du composant, vous pouvez ajouter la ligne suivante:

host: {'class': 'blueClass'} 

et vous faites le reste du travail dans css css à la place.

Answer 2

Dans le composant enfant, vous pouvez ajouter ce paramètre à @Component.

enfant-component.component.ts

@Component({ selector: 'child-component', templateUrl: 'child-component.component.html', styleUrls: ['child-component.component.css'] encapsulation: ViewEncapsulation.None })

enfant component.component.css

.container-fluid content{background-color: blue;}

Vous pouvez ref ce côté pour plus infomartion:

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html