我对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;
}
这似乎不起作用请帮助我无法理解.
我看了这个问题但是却无法搞清楚
在@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>
Max*_*kyi 13
我对host的理解是,如果我在父组件中有一个子组件,并且我们想要从父组件设置子组件,我们可以使用:host.和:host-context反之亦然
不,这不是它的用途.
:host选择器来自shadow DOM规范.
...这个作用域的子树称为阴影树.它附加的元素是它的影子主机.
在角度世界中,组件的模板是阴影树.组件的元素是影子主机.因此,当您为:host选择器定义样式时,样式将应用于组件的元素.
:主办
在您的示例中,如果您在my-app组件中定义了样式,则样式将应用于<my-app>DOM元素.这个特殊的配置:
:host(.mine){
color:red;
}
将应用于具有.mine类的host元素:
<my-app class="active">
如果您在app-ngrx组件中定义了样式,则样式将应用于<app-ngrx>DOM元素,而不是 <my-app>.这个特殊的配置:
:host(.mine){
color:red;
}
将应用于具有.mine类的host元素:
<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.
Gün*_*uer 12
: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;
}
::slotted所有新浏览器现在都支持update 2,并且可以与`ViewEncapsulation.ShadowDom一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
| 归档时间： |
|
| 查看次数： |
6580 次 |
| 最近记录： |