如何在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。