Angular - @HostBinding() - 可以读取从 HTML 添加的类答案

【问题标题】：Angular - @HostBinding() - Can read classes added from HTMLAngular - @HostBinding() - 可以读取从 HTML 添加的类
【发布时间】：2019-08-12 09:23:37
【问题描述】：

我需要将 typescript 中的动态类添加到组件中，并保留程序员从 HTML 模板中添加的类。但是如果我使用 @HostBinding('class') classes: string => 从外部添加的所有类都将被忽略。

<my-component class"thisWillBeIgnored"></my-component>

我是否需要先从外部阅读课程并从打字稿中添加我的课程？如何？ :D

谢谢

【问题讨论】：

使用@HostBinding('class.<class-name>')，而不是@HostBinding('class')

标签： angular

【解决方案1】：

也许它不是比@Fredriks_Macrobond 更好的解决方案，但最简单的方法是：

  constructor(private el: ElementRef) {
  }

  @Input()
  set size(value: number) {
    if (condition) {
      this.el.nativeElement.classList.add(this.desiredClass);
    }
  }

【讨论】：

【解决方案2】：

我认为您的解决方案是使用 ngClass 指令将类应用于您的组件。然后在你的组件中，你应该使用渲染器的 addClass 方法来添加任何新的类。

<my-component [ngClass]="'my-custom-class'"></my-component>

在我的组件中：

constructor(private renderer: Renderer2, private eltRef: ElementRef) {
}

ngOnInit () {
  this.renderer.addClass(this.eltRef.nativeElement, 'my-other-custom-class');
}

当然你不需要在ngOnInit方法中专门添加类，这只是一个例子。

【讨论】：