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

【问题标题】：Class is not binded to host element using HostBinding类未使用 HostBinding 绑定到宿主元素
【发布时间】：2019-12-17 16:31:29
【问题描述】：

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

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;
}

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

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

Stackblitz 链接

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

【问题讨论】：

标签： angular angular-decorator

【解决方案1】：

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

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

Forked Stackblitz

【讨论】：