mit 2 HostBindings zur Klasse führenden basierend auf Eingänge (Angular 4)

Question

ich in meiner Komponente den folgenden Code haben:

@Component({ 
selector: "home", 
templateUrl: "./home.html" 
}) 
export class Home { 
    constructor() {} 
    @HostBinding("class") @Input() public type: string = "alert" 
    @HostBinding("class") @Input() public position: string = "top" 
} 

und die main.html:

<home></home> 

home.html ist leer

Dies funktioniert nicht, da nur alert als Klasse festgelegt ist. Wie kann ich sowohl alert als auch top haben?

Answer 1

fand ich die Lösung, ich folgendes zu tun hatte:

@Input() public type: string = "alert" 
@Input() public position: string = "top" 
@HostBinding("class") classes = this.type + " " + this.position