import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<div></div>',
styleUrls: [
'http://example.com/external.css',
'app/local.css'
]
})
export class AppComponent {}
在external.css不加载.有没有办法在Angular 2组件中加载外部css？
Gün*_*uer 92
另请参见https://angular.io/docs/ts/latest/guide/component-styles.html
查看封装
要允许外部样式影响组件的内容,可以更改视图封装(这就是阻止样式"渗入"组件的原因).
@Component({
selector: 'some-component',
template: '<div></div>',
styleUrls: [
'http://example.com/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 https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted一起使用哪些样式的所有标签一类ng-invalid的电流分量或红色任何后代强调不管封装是None或Emulated.这取决于浏览器支持是否/deep/适用Native(据我所知,任何浏览器都不再支持).
注意
阴影穿孔CSS组合器类似于shadow DOM规范中的组合,因为它们已经被弃用了很长一段时间.
使用默认的 ViewEncapsulation.Emulated Angulars自己/deep/和::shadow实现,即使Chrome删除了本机支持,它们也能正常工作.
使用ViewEncapsulation.NativeAngular使用Chromes shadow DOM CSS组合器(只有Chrome支持它们,无论如何AFAIK).如果Chrome最终删除它们,那么它们也不会在Angular中工作(ViewEncapsulation.Native仅限于).
全球风格
全局添加的样式(index.html)不考虑组件边界.Angular2不会重写这些样式,ViewEncapsulation.Emulated也不适用于它们.只有在ViewEncapsulation.Native设置并且浏览器具有本机影子DOM支持的情况下,全局样式才能渗透.
另请参阅此相关问题https://github.com/angular/angular/issues/5390
Dow*_*ski 12
首先 - styles/ styleUrls只应用于任何直接影响模板元素样式的css规则.
您的external.css未应用于组件的原因是因为当您从external.css中加载这些规则时,styleUrls或者styles在编译时,angular2会将属性选择器等唯一的组件标识符附加到原始选择器.
例如,在您的external.css中,如果存在类似的规则div.container { /*some rules*/ },它将成为div.container[_ngcontent-cds-2] { /*some rules*/ }.因此,无论您如何努力强制您的规则成为优先级规则,例如添加!important标记,它就不会起作用 - 您的external.css中的所有选择器都被限制在属性选择器的一个级别,只有组件元素带有相同的属性.这就是angular2将样式限制为仅当前组件的方式.
这是我的解决方案 - 我将为所有js脚本添加一个外部资源服务,它将SystemJS用于加载AMD或全局,对于所有的css文件,它将使用普通的javascript来创建一个<link>元素并附加它到<head>元素.
这是我的一段代码供您考虑:
loadCSS(url) {
// Create link
let link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
link.type = 'text/css';
let head = document.getElementsByTagName('head')[0];
let links = head.getElementsByTagName('link');
let style = head.getElementsByTagName('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);
}这可能晚了，希望这对其他人有所帮助。要使用 ViewEncapsulation，只需使用
import { ViewEncapsulation } from '@angular/core';
| 归档时间： |
|
| 查看次数： |
79752 次 |
| 最近记录： |