css - 如何向被调用的 Angular 组件本身添加一个类？

Question

如果我的主/父组件具有以下内容：

<div class="main-wrapper">
  <app-inner></app-inner>
</div>

我如何向内部调用的组件添加一个类？

目标是app-inner组件在呈现时呈现一个类，以便我可以在我的 CSS 中引用它，例如：

<app-inner class="inner-comp">

但是，这个类属性的直接放置，也没有[className]，[ngClass]似乎也没有实际添加它。

Answer 1

在不修改主/父组件的 HTML 的情况下，您可能只需在InnerComponent中使用HostBinding：

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

export class InnerComponent implements OnInit {
  @HostBinding('className') componentClass: string;

  constructor() {
    this.componentClass = 'inner-comp';
  }
}

声明的字符串变量componentClass直接引用className的hostPropertyName（“绑定到数据属性的 DOM 属性”）。

这会在InnerComponent呈现时自动添加到 inner-comp 类的所有调用，<app-inner>然后允许在父组件的 CSS 中直接引用，例如：

.inner-comp { height: 100%; }