Html 如何在子组件（Angular 2）中验证根组件的css类？

angular 2应用程序中有3个组件。

class=“container fluid content”

是app.component.html中的css类。此

class=“container fluid content”

是其他组件的默认css。现在我想在细节组件中设置背景色：蓝色。我试图这样设置detail.component.ts

样式：['.container fluid content{background color:blue；}']

它不起作用。如果我像这样在app.component.html中设置

，它将应用于这两个组件。如何在详图组件中重写此类=“容器流体内容”

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

//我的项目结构
应用程序
-app.component.html
-app.component.ts
-欢迎光临
-欢迎使用.component.html
-欢迎光临
-细部
-detail.component.html
-detail.component.ts
//app.component.html
//欢迎使用.component.html
欢迎页面标题
//detail.component.html
详细信息页面标题
//detail.component.ts
从'@angular/core'导入{OnInit，Component}；
从“../detail/detail.service”导入{DetailService}；
从'@angular/core'导入{HostBinding}；
@组成部分({
提供者：[详细信息服务]
templateUrl:'./detail.component.html'，
样式：['h3{margin:5px}']
})
导出类DetailComponent实现OnInit{
@HostBinding（'class.blueClass'）蓝色：布尔值=false；
构造函数（私有_detailService:detailService）{}
恩戈尼尼特（）{
这个蓝色=真；
}
}

您是否尝试过hostbinding并在其中添加新类

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

在第二个组件中，打开onInit

ngOnInit() {
    this.blue = true;
} 

另一种方法是在组件定义中，可以添加以下行：

  host: {'class': 'blueClass'} 

---

你可以用css来完成剩下的css工作

您尝试过hostbinding并在那里添加新类了吗

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

在第二个组件中，打开onInit

ngOnInit() {
    this.blue = true;
} 

另一种方法是在组件定义中，可以添加以下行：

  host: {'class': 'blueClass'} 

---

你可以用css来完成剩下的css工作

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

child-component.component.ts

@组件({
选择器：'子组件'，
templateUrl:'child component.component.html'，
样式URL:['child-component.component.css']
封装：视图封装。无
})

child-component.component.css

.container fluid content{背景色：蓝色；}

有关更多信息，请参考此面：

---

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

child-component.component.ts

@组件({
选择器：'子组件'，
templateUrl:'child component.component.html'，
样式URL:['child-component.component.css']
封装：视图封装。无
})

child-component.component.css

.container fluid content{背景色：蓝色；}

有关更多信息，请参考此面：

---

---

我需要在哪里添加这个@HostBinding（'class.someClass'）蓝色：boolean=false；。在哪个组件中？添加detail.component.ts文件。从细节组件中的angular/Core导入HostBinding装饰器。是否将HostBinding添加到导入中？从'@angular/core'导入{Component，HostBinding}；我需要在哪里添加这个@HostBinding（'class.someClass'）蓝色：boolean=false；。在哪个组件中？添加detail.component.ts文件。从细节组件中的angular/Core导入HostBinding装饰器。是否将HostBinding添加到导入中？从'@angular/core'导入{Component，HostBinding}；I get error加载资源“child component.component.css”失败。你能给出详细错误、文件夹结构、构建工具吗？你为它创建了css吗？在您的结构中，它应该在这里：-detail-detail.component.html-detail.component.ts-detail.component.css，并且您应该使用样式URL:['detail.component.css']是的，我也是这样做的。在Chrome浏览器控制台中，我收到以下错误

加载资源失败：：8100/detail.component.css加载资源失败：服务器响应状态为404（未找到）未处理承诺拒绝：加载detail.component.css失败；区域：；任务：承诺；值：未能加载detail.component.css未定义的consoleError@zone.js:522 zone.js:524 ZoneAwareError consoleError@zone.js:524

尝试以下方法：

样式URL:['./child-component.component.css']

加载资源“child-component.component.css”失败，您能给出详细错误信息、文件夹结构、文件夹结构和，构建工具？你为它创建了css吗？在您的结构中，它应该在这里：-detail-detail.component.html-detail.component.ts-detail.component.css，并且您应该使用样式URL:['detail.component.css']是的，我也是这样做的。在Chrome浏览器控制台中，我得到此错误

未能加载资源：：8100/detail.component.css加载资源失败：服务器响应状态404（未找到）未处理的承诺拒绝：未能加载detail.component.css；区域：；任务：承诺；值：未能加载detail.component.css未定义的consoleError@zone.js:522 zone.js:524 ZoneAwareError consoleError@zone.js:524

尝试以下方法：

样式URL:['./child-component.component.css']

如果您显示detail.component.ts的工作方式，则可以正常工作。@tildy请在上面找到detail.component.ts的示例代码如果您显示detail.component.ts的工作方式，则可以正常工作。@tildy请在上面找到detail.component.ts的示例代码