Question

您好，我正在尝试使用角度主机绑定来绑定类，但是出了什么问题

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属性起作用，但是当我在style.css中复制这些CSS时，它就开始起作用了

我知道使用：host，但是我很困惑为什么它不起作用

Stackblitz链接

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

Answer 1

它已绑定，但样式.hostClass仅可应用于app.component.html模板中的元素。

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

Forked Stackblitz

类没有使用HostBinding绑定到主机元素吗？

1 个答案: