styling condizionale sull'elemento ospite

Question

Ho un componente che non fa altro che rendere, la sua qualcosa di simile:

@Component({ 
    selector: 'my-comp', 
    host: ???, 
    template: ` 
     <ng-content></ng-content> 
    ` 
}) 

export default class MyComp { 
    @Input() title: string; 
    public isChanged: boolean; 
} 

Il componente ha una proprietà isChanged e voglio applicare styling sull'elemento dell'host in base a tale isChanged proprietà. È possibile?

Answer 1

si utilizza il prefisso class e style per questo. Ecco un esempio:

@Component({ 
    selector: 'my-comp', 
    host: { 
    '[class.className]': 'isChanged' 
    }, 
    template: ` 
    <ng-content></ng-content> 
    ` 
}) 
export default class MyComp { 
    @Input() title: string; 
    public isChanged: boolean; 
} 

veda la risposta del Günter per maggiori dettagli:

• ngClass in host property of component decorator does not work

Answer 2

Non sei sicuro di quello che stai cercando di fare, ma qualcosa come questo dovrebbe essere sufficiente in cui si utilizza ngAfterViewInit e ElementRef:

import {AfterViewInit, ElementRef} from '@angular/core'; 

@Component({ 
    selector: 'my-comp', 
    host: ???, 
    template: ` 
    <ng-content></ng-content> 
    ` 
}) 

export default class MyComp implements AfterViewInit { 
    @Input() title: string; 
    public isChanged: boolean; 

    constructor(private _ref: ElementRef) {} 

    ngAfterViewInit() { 

    var host = this._ref.nativeElement; 

    if (this.isChanged) { 
     host.style.width = '200px'; 
    } 
    } 
} 

Se si vuole fare qualche controllo per isChanged ogni volta che cambia si potrebbe implementare ngDoCheck invece/così:

ngDoCheck() { 

    if (this.isChanged !== this.previousIsChanged) { 

    var host = this._ref.nativeElement; 

    if (this.isChanged) { 
     host.style.width = '200px'; 
    } 
    } 
} 

Answer 3

Penso che si desidera lasciare il vostro fuoco componente di un evento che può essere catturato dalla host (e possibilmente passare alcuni dati con esso).

Per fare questo si avrebbe una proprietà @output come:

@Output() isChanged: EventEmitter<any> = new EventEmitter() 

poi nel codice che si possa fare:

this.isChanged.emit(some value to pass) 

e prendere le cose come:

(isChanged)="doSomething($event)"