html - 如何在其子组件-Angular 2 中覆盖根组件的 css 类？

Question

我在 Angular 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;">它适用于这两个组件。如何在详细信息组件中重写这个类=“container-fluid content”？

 //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

在子组件中，您可以将此参数添加到@Component。

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

// child-component.component.css

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

您可以引用这一面以获取更多信息:

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