无法理解Angular2中组件的使用:host

时间:2017-03-03 16:14:13

标签: css angular

我对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>

时它应该是红色的

2 个答案:

答案 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

一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted