Angular 2组件使用来自另一个组件的css

我为2个不同的css文件得到了2个具有2个不同

样式URL

的角度组件

前。 第一部分：

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

第二部分：

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

---

如果我运行我的应用程序，我第二次选择的组件将使用我第一次选择的组件的CSS。

是否要在另一个组件中使用其他组件的CSS？如果是这样，请将其添加到

styleUrls

数组中。不，我希望每个组件都使用其css文件我很难理解您想要什么，但您可以自由地执行

styleUrls:[/*路径到任何css文件*/]

。我想问题是您在第一个组件中使用了

viewenclosuration.None

。请记住，如果您使用ViewEncapsulation.None，则将组件的.css添加为

。您的css

在index.htmlNO中，我说如果使用ViewEncapsulation.None，则将样式添加到.html中。您需要定义您的类，比如

.component1 head{color:'red'}

和

.component2 head{color:'green'}

并将组件1包含在

..

中，并与第二个组件相等。好的选择是不使用viewEncapsulation.None，但是如果需要使用，请使用carafully