我应该将类属性添加到 Angular 组件选择器标签吗答案

【问题标题】：Should I add class attributes to Angular component selector tags我应该将类属性添加到 Angular 组件选择器标签吗
【发布时间】：2018-12-04 22:08:18
【问题描述】：

我想直接将类添加到 Angular 5 中的选择器。像这样：

<myapp-selector class="myclass"></myapp-selector>

我一直在寻找一段时间，我找到了一些解决方案，例如使用 host 或 @Component。但我找不到具体问题的明确答案。

它安全吗？是否被认为是不好的做法？

【问题讨论】：

【解决方案1】：

最好的方法是在组件内应用 stlye/class 作为容器，但您也可以向组件添加类。

【讨论】：

【解决方案2】：

我想这真的取决于你想要达到的目标。

只需将类添加到组件，只需将其静态添加到标签即可，正如您已经提到的那样。

添加类有条件可以通过多种方式完成，其中一种是使用@HostBinding()或组件的host属性

@Component({
  ...
})
class SomeComponent {

  @HostBinding('class.someClassName') shouldAddClass: boolean;

}

或者

@Component({
  host: {
    '[class.active]': 'somePropertyName'
  }
})
class SomeComponent {
  somePropertyName: boolean;
}

现在，active 类将在属性为 true 时添加，并在属性为 false 时删除。

另一种选择是使用[ngClass] 指令，其作用基本相同，只是组件的使用者决定何时添加和删除类：

<some-component [ngClass]="{ active: somePropertyThatsEitherTrueOrFalse }">

【讨论】：