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

Question

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

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

我已经搜索了一段时间，我找到了一些解决方案，比如使用 host 或 @Component。但我找不到关于具体问题的明确答案。

它安全吗？它是否被认为是一种不良做法？

Answer 1

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

Answer 2

我想这实际上取决于您要实现的目标。

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

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

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

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

}

或

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

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

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

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

Should I add class attributes to Angular component selector tags