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

Question

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

app.component.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'
    }

app.component.template

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

app.component.css

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

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

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

Stackblitz link

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

Answer 1

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

您应该改用 :host.hostClass 选择器

Forked Stackblitz

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

Class is not binded to host element using HostBinding

angular-decorator

angular