我对host的理解是,如果我在父组件中有子组件,并且我们想要从父组件设置子组件,我们可以使用:host。 和:host-context反之亦然。 如果这是主机的正确使用,请告诉我。
https://angular.io/docs/ts/latest/guide/component-styles.html
当我尝试在我的应用程序中执行相同的工作时,
应用程序组件模板
<div class ="top">
<h1>
Home Component
</h1>
<hr>
<app-ngrx></app-ngrx>
<router-outlet></router-outlet>
<div>
ngrx组件模板
<h3 class="mine">NGRX</h3>
<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>
应用程序组件CSS
:host(.mine){
color:red;
}
这似乎不起作用请帮助我无法理解。
我看了这个问题但是却找不到
Angular 2: How to style host element of the component?
@Gunter回答后更新
在我的app-ngrx模板中,我添加了
<h3 class = "mine">NGRX</h3>
<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>
并在app-ngrx css文件中添加了
:host(.mine){
color:red;
}
但即使没有在应用程序组件中添加我的
<app-ngrx></app-ngrx>
h3是红色的,因为我认为<app-ngrx class = "mine"></app-ngrx>
答案 0 :(得分:10)
我对主持人的理解是,如果我有一个儿童组件 在父组件内部,我们想要从中设置子组件的样式 我们可以使用的父组件:host。和:主机上下文 反之亦然
不,这不是它的用途。
:host
选择器来自shadow DOM spec。
...这个范围的子树称为影子树。它的元素 附属于它的影子主人。
在角度世界中,组件的模板是阴影树。组件的元素是影子主机。因此,当您为:host
选择器定义样式时,样式将应用于组件的元素。
<强>:主机强>
在您的示例中,如果您在my-app
组件中定义了样式,则样式将应用于<my-app>
DOM元素。这个特殊的配置:
:host(.mine){
color:red;
}
将应用于具有.mine
class:
<my-app class="active">
如果您在app-ngrx
组件中定义了样式,则样式将应用于<app-ngrx>
DOM元素, NOT <my-app>
。这个特殊的配置:
:host(.mine){
color:red;
}
将应用于具有.mine
class:
<app-ngrx class="active">
<强>:主机上下文强>
现在,:host-context
也应用于主机元素,但函数(括号)采用的选择器不是针对主机元素本身,而是针对所有祖先直到文档根目录。如果找到这样的元素,则应用样式。
例如,这个选择器
:host(.mine){
color:red;
}
符合这样的结构:
<my-app class="mine">
然而,这个选择器:
:host-context(.mine){
color:red;
}
匹配此结构:
<div class="mine">
...
<my-app>
如果要有条件地将样式应用于组件视图(阴影根),这很有用。这使h2
始终加粗:
h2 {
font-weight: bold;
}
而这
:host-context(.make-inner-components-bold) h2 {
font-weight: bold;
}
只有当您的组件位于具有类.make-inner-components-bold
的元素内时,才会使它们变为粗体。
答案 1 :(得分:9)
:host { ... }
选择组件本身 :host(.mine) { ... }
在class="mine"
设置
:host-context(.mine) { ... }
选择组件本身,当其中一个祖先设置class="mine"
时
另见https://angular.io/docs/ts/latest/guide/component-styles.html
@Component({
selector: 'h3',
styles: [':host(.mine) { color: red; }],
template: '<ng-content></ng-content>'})
class MyH3Component{}
<h3 class="mine">this is red</h3>
<h3>this is black</h3>
或:host-context
@Component({
selector: 'h3',
styles: [':host-context(.mine) { color: red; }],
template: '<ng-content></ng-content>'})
class MyH3Component{}
<body class="mine">
<my-app><my-app>
<body>
AppComponent
template: '<h3>this is red</h3>'
或class="mine"
设置
<body>
<my-app><my-app>
<body>
AppComponent
template: '<h3>this is black</h3>'
<强>更新强>
如果要设置子组件的内容(而不是子组件本身),可以使用/deep/
:host child /deep/ h3 {
color: red;
}
更新2
所有新浏览器现在都支持::slotted
,并且可以与`ViewEncapsulation.ShadowDom