Warunkowe stylizacji na elemencie przyjmującym

Question

Mam składnik, który wszystko robi to render, jej coś takiego:

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

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

komponent ma właściwość isChanged i chcę zastosować stylizacji na elemencie przyjmującym na podstawie tej Właściwość isChanged. Czy to możliwe?

Answer 1

użyć prefiksu class i style do tego. Oto przykład:

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

Patrz odpowiedź na Guntera Szczegółowe informacje:

• ngClass in host property of component decorator does not work

Answer 2

Nie wiem, co próbujesz zrobić, ale coś takiego powinno wystarczyć gdzie użyć ngAfterViewInit i 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'; 
    } 
    } 
} 

Jeśli chcesz zrobić sprawdzając isChanged za każdym razem zmienia można wdrożyć ngDoCheck zamiast /, a także:

ngDoCheck() { 

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

    var host = this._ref.nativeElement; 

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

Answer 3

Myślę, że chcesz, aby twoje komponentu ogień zdarzenie, które może zostać przechwycony przez host (i ewentualnie przekazać z nim niektóre dane).

Aby to zrobić trzeba właściwość @output jak:

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

następnie w kodzie można zrobić:

this.isChanged.emit(some value to pass) 

i złapać go jak:

(isChanged)="doSomething($event)"