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

Posted 2023-03-13

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

【英文标题】：Should I add class attributes to Angular component selector tags

【发布时间】：2018-12-04 22:08:18

【问题描述】：

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

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

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

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

【参考方案1】：

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

【讨论】：

但是为什么呢？会导致不一致或奇怪的行为吗？

IMO 没有不一致或奇怪的行为，但这不是推荐的方法。

【参考方案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 ">