如何在其子組件中使用根組件的CSS類 - Angular 2？

Question

我在角2應用程序中有3個組件。class="container-fluid content"是app.component.html中的css類。這class="container-fluid content"是其他組件的默認CSS。現在我想在詳細組件中設置background-color:blue。我試圖設置detail.component.ts像這樣styles:['.container-fluid content{background-color: blue;}']它沒有工作。如果我像這樣設置了app.component.html <div class="container-fluid content" style="background-color: blue;">它適用於這兩個組件。如何重寫這個類=「容器流體內容」的詳細組件？

//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並在其中添加新類？

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

而在第二個組件只是切換onInit？

ngOnInit() { 
    this.blue = true; 
} 

的另一種方式可以在組件定義，您可以添加以下行：

host: {'class': 'blueClass'} 

和你的CSS工作休息CSS代替。

Answer 2

在子組件中，您可以將此參數添加到@Component。

兒童component.component.ts

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

兒童component.component.css

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

您可以參考這一面更infomartion：

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