Ana bileşendeki değişikliklere abone olun Angular

Question

Çocuk bileşenlerinin bir listesini barındıran bir üst bileşenim var. Bu çocuklar dinamik olarak oluşturulur ve herhangi bir türde olabilir.

Peki, ne `` `(herhangi bir şekilde component.instance) kullanarak alt bileşeninde bazı özelliklerini güncellemek sonra ComponentFactoryResolver çocuk bileşenlerini oluşturmak ve ana bileşen ev sahibi olarak bir ng-container kullanıyor yapıyorum .kimlik = host.id; `` `` Burada

ana bileşeni için kodu (bir tablo bir satır ile var):

<tr class="table-collapse__item" [class.active]="company === selected"> 
    <td [attr.colspan]="getItemColspan()"> 
    <ng-container host [id]="name" [selected]="isSelected"></ng-container> 
    </td> 
</tr> 

host bir direktif

@Directive({ 
    selector: '[host]' 
}) 
export class Host implements OnChanges { 
    @Input() id: any; 
    @Input() selected: boolean; 
    constructor(public viewRef: ViewContainerRef) {} 
} 

olduğu

ve son olarak nasıl özelliklere Şimdi

@ViewChildren(Host) hosts: QueryList<Host>; 

    constructor(private resolver: ComponentFactoryResolver, 
       private cd: ChangeDetectorRef) {} 

    ngAfterViewInit() { 
    if (this.hosts) { 
     const componentFactory = this.resolver.resolveComponentFactory(this.inner); 
     this.hosts.forEach((host: Host) => { 
     const component = host.viewRef.createComponent(componentFactory); 
     (component.instance as any).id = host.id; 
     (component.instance as any).selected = host.selected; 
     }); 
     this.cd.detectChanges(); 
    } 
    } 

, sorumu bileşenlerini oluşturmak ve güncellemek için. Özelliklerinde değişikliklere tepki vermek için çocuk bileşenine ihtiyacım var, ama onların girişleri Giriş değil, yalnızca temel özellikler olduğu için, childComponent içinde ngOnChanges kullanamıyorum. Yani, alt bileşenlerden ana bileşendeki değişikliklere abone olabilmem için bir yol var mı?

ngOnChanges'i Host yönergesinde kullanabilir ve bileşendeki özellikleri güncelleyebilir, ancak alt öğe bileşeninde bazı kodları nasıl tetiklerim?

Bunu test etmek için bir plunker sahibim. Data1, data2, data3 veya data4 üzerine tıklandığında, aşağıdaki satır çökmeli veya genişletilmelidir.

Teşekkürler.

Answer 1

Çocuk bileşenleri ebeveyn değişikliklere dinleyemiyorum, ancak bunları uyarabilir Çocuğunuz bileşeninde olay yayıcı kullanabilir ve ana bileşende işlevini erişebilir çocuklarda bir yöntem çağırarak yapılan değişiklikler hakkında bilgi:

components = []; 
ngAfterVeiwInit() { 
if (this.hosts) { 
    const componentFactory = this.resolver.resolveComponentFactory(this.inner); 
    this.hosts.forEach((host: Host) => { 
     const component = host.viewRef.createComponent(componentFactory); 
     (component.instance as any).id = host.id; 
     (component.instance as any).selected = host.selected; 
     this.components.push.components(); 
    }); 
    this.cd.detectChanges(); 
    }  
} 

ngOnChanges() { 
    this.components.forEach((c) => { 
    c.instance.ngOnChanges(); // or any other method the child comonents have 
    }) 
} 

Answer 2

Sen

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html https://toddmotto.com/component-events-event-emitter-output-angular-2