Verwenden Sie die Component-Klassenvariable in Component-Host

Question

Wissen Sie, wie kann ich eine class Variable innerhalb der @Component Deklaration verwenden?

Dies ist der gewünschte Ansatz:

@Component({ 
    selector: "whatever", 
    host: { 
     "[class]":"className" 
    } 
}) 
export class MyComponent { 
    @Input() className:string="my-class-name"; 
} 

Erwartete Ergebnisse:

<whatever class="my-class-name"></whatever> 

Answer 1

Sie können den HostBinding Dekorateur verwenden, um die gewünschten CSS-Klasse zurück zum Host-Elemente zu setzen:

@HostBinding('class.my-class-name') 
protected get myClass() { 
    return true; 
} 

[Bearbeiten]

Das obige Beispiel zeigt, wie eine statische CSS-Klasse für das Hostelement festgelegt wird. Um eine dynamische Klasse gesetzt, dann müssen Sie die Eigenschaft classname mit HostBinding Dekorateur dekorieren:

@HostBinding('class') 
@Input() 
public className:string = "my-class-name"; 

Plunker: https://plnkr.co/edit/iPbrYbUSZtkHiGLDyo2B?p=preview