Question

我有非常基本的，可重用的css规则，例如：

.ng-invalid {
    border-left: 5px solid #a94442;
}

.ng-valid {
    border-left: 5px solid #42A948;
}

我想为我的所有组件重复使用它们。如果我将它放在我的根AppComponent中，这是由Angular引导的那个，那么除了AppComponent之外，我的应用程序中的任何其他组件都无法识别它。

我必须在这里遗漏一些非常明显的东西。

Answer 1

Angular为组件添加了唯一的类，并在将CSS添加到<head>之前重写了添加到组件的CSS的选择器，以仅匹配组件唯一的类。这是为了模拟shadow DOM样式封装。

您可以通过

解决这个问题

设置encapsulation: ViewEncapsulation.None，阻止重写禁用封装的组件的样式
直接将CSS添加到index.html。 Angular不会重写未添加到组件的CSS。
使用＆＃34;阴影穿孔CSS组合器＆＃34; ::ng-deep someSelector { ... }这也使CSS忽略了添加到组件的唯一类。

Answer 2

您可能应该在html或外部样式表中声明全局css规则。

Answer 3

你可以实现我的风格改变

:host .ng-invalid {
    border-left: 5px solid #a94442;
}

:host .ng-valid {
    border-left: 5px solid #42A948;
}

并且在您的子组件中，您可以设置encapsulation: ViewEncapsulation.None的属性（但默认情况下它是ViewEncapsulation.None，因此您也可以不需要设置）。

所以现在您应该可以在所有子组件中使用您的样式类。

演示：http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

Answer 4

从命令行运行：

npm install file-loader style-loader --save-dev

现在在webpack.config.js中将以下行添加到loaders数组中：

{test：/\。（eot | woff2 | woff | tff | svg）/，loader：'file-loader'}

现在在app.component.ts中，在import语句之后添加以下行：

要求（ '风格！引导/ DIST / CSS / bootstrap.css'）

这假设您使用的是最新版本的angular2 / angular2-seed位于此处：https://github.com/angular/angular2-seed截至2016年11月8日

Answer 5

在我看来，你应该同意整个团队在这方面的特定策略。

E.g。你可以设置encapsulation: ViewEncapsulation.None就像回复中提到的@sreeramu一样。但仅适用于app（root）组件。

你应该尽可能多地利用CSS封装，因此关闭几个组件是有点臭。但仅将它应用于一个组件可能会正常工作。

Answer 6

您可以在src / styles.css

中编写CSS

或者您可以创建新的CSS文件并在 .angular-cli.json 文件中指定

"apps": [
  "styles": ["styles.scss"]
]

Answer 7

对于使用var radios = document.querySelectorAll('input[type=radio]'); var result = document.querySelector('.result'); var a; for (var i = 0; i < radios.length; i++) { radios[i].addEventListener('change', function() { a = this.dataset.number; }); } result.innerHTML = a;创建的角度应用程序，可以将所有组件所需的CSS放入@angular/cli目录中的styles.css文件中。

将CSS样式应用于Angular 2 app

7 个答案: