相关疑难解决方法(0)

我对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:如何设置组件的主机元素？

在@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>