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

Question

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

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

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

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

Answer 1

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

Answer 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 }">