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

Question

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

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

我已经搜索了一段时间，发现了一些解决方案，例如使用host中的@Component。但是我无法在具体问题上找到明确的答案。

这是否安全，是否被认为是不正确的做法？

Answer 1

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

只需将类静态添加到标签中即可，只需将其添加到组件中即可。

有条件地添加类 可以通过多种方式完成，其中一种方式是使用@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 }">

Answer 2

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