Abonnieren von Änderungen in der übergeordneten Komponente in Angular

Question

Ich habe eine übergeordnete Komponente, die eine Liste der untergeordneten Komponenten hostet. Diese Kinder werden dynamisch erstellt und können von jedem Typ sein.

Also, was ich tue ist mit einem ng-container als Host in der übergeordneten Komponente, erstellen Sie die untergeordneten Komponenten mit ComponentFactoryResolver und aktualisieren Sie einige Eigenschaften in der untergeordneten Komponente mit `` `(component.instance als alle) .id = host.id; `` ``

Hier ist der Code für die übergeordnete Komponente (es ist eine Tabelle mit einigen Zeilen):

<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 ist eine Richtlinie

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

und schließlich, wie die Komponenten zu erstellen und die Eigenschaften

@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(); 
    } 
    } 

Nun, meine Frage aktualisieren. Ich brauche die Kindkomponente, um auf Änderungen in ihren Eigenschaften zu reagieren, aber da ihre Eigenschaften keine Eingaben, sondern nur grundlegende Eigenschaften sind, kann ich ngOnChanges nicht innerhalb der childComponent verwenden. Also gibt es eine Möglichkeit, wie ich von der Kindkomponente Änderungen an der Elternkomponente vornehmen kann?

Ich kann ngOnChanges in der Host-Direktive verwenden und die Eigenschaften in der Komponente aktualisieren, aber wie kann man dann Code in der untergeordneten Komponente auslösen?

Ich habe eine plunker, um es zu testen. Wenn Sie auf "data1", "data2", "data3" oder "data4" klicken, sollte die folgende Zeile ausgeblendet oder erweitert werden.

Danke.

Answer 1

Child-Komponenten können nicht auf Änderungen der Eltern hören, aber Sie können sie benachrichtigen über Änderungen durch Aufrufen einer Methode auf die Kinder stattdessen:

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

Sie können Ereignis-Emitter in Ihrem Kind-Komponente verwenden und Zugriff auf die Funktion in übergeordnete Komponente

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