phong cách có điều kiện về yếu tố chủ

Question

Tôi có một thành phần mà tất cả nó làm là làm, một cái gì đó của nó như thế này:

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

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

Các thành phần có một tài sản isChanged và tôi muốn áp dụng phong cách trên các yếu tố chủ trên cơ sở đó isChanged thuộc tính. Điều này thậm chí có thể?

Answer 1

Bạn sử dụng tiền tố class và style cho điều này. Dưới đây là một ví dụ:

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

Xem câu trả lời của Günter để biết thêm chi tiết:

• ngClass in host property of component decorator does not work

Answer 2

Không chắc chắn những gì bạn đang cố gắng để làm một cái gì đó nhưng như thế này là đủ mà bạn sử dụng ngAfterViewInit và 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'; 
    } 
    } 
} 

Nếu bạn muốn làm một số kiểm tra cho isChanged mỗi khi nó thay đổi bạn có thể thực hiện ngDoCheck thay vì/cũng như:

ngDoCheck() { 

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

    var host = this._ref.nativeElement; 

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

Answer 3

Tôi nghĩ rằng bạn muốn để cho lửa thành phần của bạn một sự kiện có thể được đánh bắt bởi các máy chủ (và có thể truyền một số dữ liệu với nó).

Để làm điều đó bạn sẽ có một tài sản @output như:

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

sau đó trong mã của bạn, bạn có thể làm:

this.isChanged.emit(some value to pass) 

Và bắt nó thích:

(isChanged)="doSomething($event)"