Wie bekomme ich die Klassen, die über HTML auf eine Angular 2-Komponente angewendet werden?

Question

Ich möchte eine Komponente verwenden, die ich angelegt habe, wie folgt:

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

Im vx-alert Komponente ich die Liste der Klassen ziehen wollen, die in der HTML angewendet wurden, dass die Komponente verursacht instanziert werden. Letztendlich möchte ich entweder zusätzliche Klassen an die Komponente vx-alert anhängen. Ich bin in der Lage, die vx-alert Komponentenklassen sehr leicht zu ersetzen (wie folgt):

@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'; 
    } 
} 

aber wenn this.classList als neuer Wert zugewiesen wird, die ursprüngliche Klasse (n) im HTML-Code festgelegt werden überschrieben ... so wie kann ich die HTML-Klassen abrufen, damit ich sie mit meinen programmgesteuerten Klassen verketten kann?

Mein Plunker wurde aktualisiert von @acdcjunior bereitgestellt, um die Antwort zu verwenden:

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

Answer 1

Sie das class Attribut vx-alert es (@Input('class')) eine Eingabe in Erwägung ziehen könnte. Auf diese Weise können Sie den Wert ablesen.

Danach können Sie @HostBinding('class') verwenden Sie es zu ändern:

@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 See.