类未使用 HostBinding 绑定到宿主元素

Question

我正在尝试使用 Angular 中的主机绑定来绑定一个类，但出了问题

应用程序组件.ts

import { Component, HostBinding } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      @HostBinding('class') class = 'hostClass'
    }

应用程序组件模板

<div>This is a custome content</div>

应用程序组件.css

.hostClass {
  color : #fff;
  background-color: blue;
  padding : 20px;
  border : 1px solid black;
  display:block;
}

我可以看到类已应用于主机元素，但仍然没有 css 属性起作用，但是当我在 style.css 中复制这些 css 时，它开始工作

我知道如何使用 :host 但我很困惑为什么它不起作用。

堆栈闪电战链接

https://stackblitz.com/edit/angular-jhh7fk

Answer 1

它是绑定的，但样式.hostClass只能应用于app.component.html模板内的元素。

你应该使用:host.hostClass选择器

叉式堆栈闪电战