angular控件css_关于angular：将外部CSS加载到组件中import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '',
styleUrls: [
'example/external.css',
'app/local.css'
]
})
css 属性选择器export class AppComponent {}
external.css不会加载。
有什么办法可以在Angular 2组件中加载外部CSS？
您在浏览器控制台中是否遇到任何错误？
Angular只是忽略了外部的⼀个⽽不加载。
查看封装
要允许外部样式影响组件的内容，可以更改视图封装(这是防⽌样式"渗⼊"组件的原因)。
@Component({
selector: 'some-component',
template: '',
styleUrls: [
'example/external.css',
'app/local.css'
]
,
encapsulation: ViewEncapsulation.None,
})
export class SomeComponent {}
视图封装实现了⼀个⽬的。更好的⽅法是将样式直接添加到应影响的组件中。
ViewEncapsulation是按组件设置的，在某些情况下可能会派上⽤场。
"阴影穿孔"
您还可以使⽤阴影穿孔CSS组合器::ng-deep(不推荐使⽤>>>和/deep/)来构建跨组件边界的选择器，例如
:host ::ng-deep .ng-invalid {
border-bottom: solid 3px red;
}
更新
现在，所有新浏览器都⽀持::slotted，并且可以与`ViewEncapsulation.ShadowDom⼀起使⽤
⽆论封装是None还是Emulated，它都会在当前组件中为所有带有ng-invalid类的标签或任何带有红⾊下划线的后代设置样式。 /deep/是否可以与Native⼀起使⽤取决于浏览器的⽀持(据我所知，任何浏览器均不再⽀持)。
注意
影⼦穿刺CSS组合器与影⼦DOM规范中的组合器类似，已有相当长的⼀段时间不推荐使⽤。
在默认的ViewEncapsulation.Emulated中，使⽤了Angulars⾃⼰的/deep/和::shadow实现，即使Chrome删除了本机⽀持，它们也可以⼯作。
在ViewEncapsulation.Native中，Angular使⽤Chromes阴影DOM CSS组合器(⽆论如何AFAIK始终只有Chrome⽀持它们)。如果Chrome最终将其删除，则它们也将⽆法在Angular中运⾏(同样是ViewEncapsulation.Native)。
整体风格
全局添加的样式(index.html)不考虑组件边界。 Angular2不会重写此类样式，并且ViewEncapsulation.Emulated不适⽤于它们。仅当设置了ViewEncapsulation.Native且浏览器具有本机阴影DOM⽀持时，全局样式才能渗⼊。
附⾔使⽤封装时，建议将组件选择器写⼊Local.css以限制规则⽬标。
@ZhenyangHua有⼈如何通过代码实现这⼀⽬标？您有例⼦吗？
抱歉，应该更清楚了。"这"是指将encapsulation设置为⽆的解决⽅案。我相信Im在我的Ng2应⽤程序中具有与OP相同的问题，并且在styleUrls中声明的外部css⽂件(在我的情况下是从CDN提供)仍未加载并应⽤于该组件。没有错误/警告。相同的调⽤在Angular1 /
jQuery上也可以正常⼯作，因此它不是CORS问题。娱乐时间。
视图封装控制组件样式从附加组件中渗出的⾏为，并且不控制外部样式从渗⼊中的⾏为(它们将始终渗⼊)。
@迈克尔多数民众赞成在不是真的。如果设置了ViewEncapsulation.Emulated，则样式不会渗⼊。仅渗⼊到index.html中的样式(不会被Angular重写)会渗⼊。如果使⽤[innerHTML]="..."动态添加HTML，那么Angular也不会被HTML改写，外部的样式也会渗⼊。
@GnterZchbauer对不起，我应该澄清⼀下。外部是指⾓度应⽤程序外部(在index.html或等效语⾔中)，⽽不是组件外部。我想我们指的是不同的事情。
@Michael虽然有⼀些限制。仿真的封装不是完美的。我猜您与诸如a b { ... }的选择器有关，其中a仅适⽤于当前元素中匹配的元素，⽽b也适⽤于⼦元素中的元素。我认为这将最终解决。
@Michael问题是关于添加到@Component({ styles: [...] })的样式。但是您绝对对全球风格是正确的。我已经在回答中添加了⼀部分。
@GnterZchbauer，这不起作⽤/edit/fGvBAimMnjffp4CJnqu2?p=preview
链接到官⽅⾓度⽂档：angular.io/docs/ts/latest/guide/component-styles.html
⾸先-styles / styleUrls仅应⽤于直接影响模板中元素样式的所有CSS规则。
您的external.css⽆法应⽤到组件的原因是，当您从styleUrls或styles将这些规则加载到external.css中时，在编译时，angular2会将唯⼀的组件标识符(如归因选择器)附加到您的组件原始选择器。
例如，在external.css中，如果有类似ainer { /*some rules*/ }的规则，它将变为ainer[_ngcontent-cds-2] { /*some rules*/ }。因此，⽆论您多么努⼒使⾃⼰的规则成为优先规则，
例如添加!important标记，它将⽆法正常⼯作-external.css中的所有选择器都仅向下⼀级限制为属性选择器，只有component元素具有相同的属性。这就是angular2将样式限制为仅当前组件的⽅式。
当然总有解决⽅法。
这是我的解决⽅案-我将为所有js脚本添加⼀个外部资源服务，它将使⽤SystemJS加载AMD或Global，对于所有css⽂件，它将使⽤普通的javascript创建< x8>元素并将其附加到元素。
这是我的⼀段代码供您考虑：
loadCSS(url) {
// Create link
let link = ateElement('link');
link.href = url;
let head = ElementsByTagName('head')[0];
let links = ElementsByTagName('link');
let style = ElementsByTagName('style')[0];
// Check if the same style sheet has been loaded already.
let isLoaded = false;
for (var i = 0; i < links.length; i++) {
var node = links[i];
if (node.href.indexOf(link.href) > -1) {
isLoaded = true;
}
}
if (isLoaded) return;
head.insertBefore(link, style);
}
⽆需在* script中执⾏此操作，您只需将元素粘贴到plate html中即可。但是在这种情况下，css会从组件中渗出到其余的应⽤程序中。
这可能会晚了，希望对其他⼈有所帮助。要使⽤ViewEncapsulation，只需使⽤
import { ViewEncapsulation } from '@angular/core';
您只需要在组件的声明中添加以下内容：
@Component({
...
encapsulation: ViewEncapsulation.None,
})
希望能帮助到你。
这不是好⽅法。如上所述，即使使⽤ViewEncapsulation.None，组件也不应处理全局样式。如果组件必须影响其⾃⾝之外的任何事物，则必须使⽤该服务。原因是如果现在在同⼀个元素上有多个CSS声明，我们会陷⼊混乱和冲突
这⾥有很多复杂的答案，但是我⼀直发现，如果我想创建影响多个组件的样式，则实际上是⼀种全局样式，因此将其添加到styles.css中。此css⽂件很特殊，因为它不使⽤样式封装，因此会影响每个组件。
从概念上讲，这对我来说似乎可以，只是您必须谨慎使⽤其他样式，否则styles.css会变得太⼤。
丰富
您实际上并没有在回答问题，只是说"不要以这种⽅式做，⽽要以其他⽅式做"。⽤户显然希望加载外部CSS。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。