は、私は子コンポーネントのリストをホストする親コンポーネントをした角度

Question

で親コンポーネントの変化を購読します。この子は動的に作成され、任意のタイプであることができます。

親コンポーネントのホストとしてng-containerを使用し、子コンポーネントをComponentFactoryResolverで作成し、 `` `（component.instance as any）.idを使用して子コンポーネントのいくつかのプロパティを更新します。 = host.id; ``

ここでは、親コンポーネントのコードは、（それはいくつかの行のテーブルの）である。

<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ディレクティブ

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

であります

、最終的にどのようにコンポーネントを作成し、プロパティ今

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

を更新するには、私の質問。私は、その特性の変化に反応する子コンポーネントを必要とするが、そのproperiesが入力ちょうど基本的な性質ではないとして、私はchildComponent内ngOnChangesを使用can't。それで、子コンポーネントから親コンポーネントの変更にサブスクライブできる方法はありますか？

私はホストディレクティブでngOnChangesを使用してコンポーネントのプロパティを更新しますが、どのように、子コンポーネントにいくつかのコードをトリガすることができますか？

私はそれをテストするplunkerを持っています。 data1、data2、data3、またはdata4をクリックすると、下の行が折りたたまれたり展開されたりするはずです。

ありがとうございました。

Answer 1

子コンポーネントは親の変化を聞くことはできませんが、あなたがそれらを通知することができ、あなたの子コンポーネントでイベント・エミッターを使用して、親コンポーネントで機能にアクセスすることができます代わりに子供のためのメソッドを呼び出すことによって変更について：

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

あなたは

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