如何在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代码中设置的原始类（ES）将被覆盖......所以如何我可以检索HTML提供的类，以便可以将这些与我的编程确定的类连接起来？

我Plunker已更新为使用由@acdcjunior提供了答案：

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

Answer 1

你可以考虑的vx-alert输入的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'; 
    } 
} 

见demo plunker here。