Question

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

时它应该是红色的

Answer 1

我对主持人的理解是，如果我有一个儿童组件在父组件内部，我们想要从中设置子组件的样式我们可以使用的父组件：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的元素内时，

才会使它们变为粗体。

Answer 2

: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

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

2 个答案: