如何在Angular 2组件上通过HTML应用类？

Question

我想使用如下创建的组件：

<vx-alert class="au-upper-center">
    <p>Upper Center</p>
</vx-alert>

在vx-alert组件中，我想获取导致实例化该组件的HTML中应用的类的列表。 最终，我想将其他类附加到vx-alert组件。 我能够很容易地替换vx-alert组件类（如下所示）：

@Component({
    moduleId: module.id,
    selector: 'vx-alert',
    templateUrl: 'alert.html'
})
export class AlertComponent extends I18N implements OnInit {
    @HostBinding('class') private classList:string;

    ngOnInit() {
        this.classList = 'au-ease-in-out au-20000ms';
   }
}

但是，当this.classList分配为新值时，HTML代码中设置的原始类将被覆盖...因此，如何检索HTML提供的类，以便可以将它们连接到以编程方式确定的类上？

我的柱塞已更新为使用@acdcjunior提供的答案：

http://embed.plnkr.co/AKYU9ANRm5ogzhlzY9G0/

Answer 1

您可以考虑vx-alert的class属性@Input('class')输入（ @Input('class') ）。 这样，您可以读取其值。

之后，您可以使用@HostBinding('class')进行修改：

@Component({
    moduleId: module.id,
    selector: 'vx-alert',
    templateUrl: 'alert.html'
})
export class AlertComponent extends I18N implements OnInit {
  @Input('class') initialClassList: string;
  @HostBinding('class') private classList:string;

  ngOnInit() {
    this.classList = this.initialClassList + ' au-ease-in-out au-20000ms';
  }
}

在这里查看演示插件 。