クエリリストが動的コンポーネントで更新されない

Question

私は同じ子コンポーネントの複数のインスタンスを持つことができる親コンポーネントを持っています。トリッキーな部分は、子コンポーネントのインスタンスがinitで利用可能であり、子コンポーネント内の特定のロジックに基づいて、出力イベントエミッタを使用して親コンポーネントから別の子コンポーネントを再生成していることです。しかし、保存すると、私はHTMLテンプレートに入れた子コンポーネントの最初のインスタンスを見るだけで、動的に生成されるコンポーネントは表示しません。私は他の同様の質問を見ましたが、誰も同じ問題を抱えているようです。私はここで何が欠けていますか？

ご協力いただければ幸いです。

UPDATE - エンド

親 -

はUPDATEを誰かが周りにプレイしたい場合は、問題を示し、原因に

https://plnkr.co/edit/FW49ztzsg5uyXF7DtHDY?p=preview

を見つけることplunkerを追加しました開始コンポーネント

import { Component, OnInit, ViewContainerRef, ViewChild, ComponentFactoryResolver, ViewChildren, QueryList } from '@angular/core'; 
import { ChildComponent } from './child/child.component'; 

@Component({ 
    selector: 'parent-cmp', 
    entryComponents: [ChildComponent], 
    template: ` 
     <child-cmp (onSomeSelectionChange)="onSomeSelectionChange($event)"></child-cmp> 
     <div #childCompSection></div> 
     <button (click)="save()">Save</button> 
    ` 
}) 
export class ParentComponent implements OnInit { 

    @ViewChild('childCompSection', { read: ViewContainerRef }) childCompSection: any; 
    currentComponentHolder: any; 
    @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>; 

    constructor(private resolver: ComponentFactoryResolver) { } 

    ngOnInit() { 
     // do some stuff to load initial view, nothing done using childComponents 
    } 

    onSomeSelectionChange(someValue) { 
     if (someValue !== 3) { 
      let componentFactory = this.resolver.resolveComponentFactory(ChildComponent); 
      this.currentComponentHolder = this.childCompSection.createComponent(componentFactory); 
      this.currentComponentHolder.instance.onSomeSelectionChange.subscribe(data => this.onSomeSelectionChange(data)); 
     } 
    } 

    // Need all child components (which includes dynamically generated components) here 
    save() { 
     console.log(this.childComponents); // This just prints the child-cmp object that is already added not the ones that are dynamically added via ComponentFactoryResolver 
    } 

} 

子コンポーネント

import { Component, Output, EventEmitter } from '@angular/core'; 
import { ChildComponent } from './child/child.component'; 

@Component({ 
    selector: 'child-cmp', 
    template: ` 
     <div> 
      <select [(ngModel)]="selectedValue" (ngModelChange)="showNumberField($event)"> 
       <option value="0">Select...</option> 
       <option value="1">Add...</option> 
       <option value="2">Subtract...</option> 
       <option selected value="3">End</option> 
      </select> 
      <div *ngIf="showField"> 
       <label>Number:</label><input type="number" [(ngModel)]="numValue"> 
      </div> 
     </div> 
    ` 
}) 
export class ChildComponent { 

    @Output() onSomeSelectionChange = new EventEmitter<Lookup>(); 
    selectedValue: number; 
    numValue: number; 
    showField: boolean = false; 

    showNumberField(value) { 
     if(value !== 3) { 
      showField = true; 
     } 
     this.onSomeSelectionChange.emit(value); // This does work fine and another instance of the child component is generated from parent component but QueryList in parent component does not get updated 
    } 
} 

Answer 1

すべての子コンポーネントの後ngAfterViewInit方法は、あなたがngOnInit

Answer 2

で操作を実行することはできません

export class ParentComponent implements OnInit, AfterViewInit { 

ngAfterViewInit(){ 

    ///////////////// your operations 
} 

を実行しますAngular chat forumからの確認を得ましたその@ViewCh ildren/@ ViewChildは、ビュー内で既に使用可能な要素のみを読み取ることができます。ビューの初期化中は動的コンポーネントが利用できないので、動的に生成されたコンポーネントのリストを保持して、それらを追跡する必要がありました。

Answer 3

私は同じ問題を遭遇し、要素を追加または削除すると発生するクエリリストの変更をサブスクライブできることがわかりました。私はngOnInitでchildComponentsを使用していない

@ViewChildren(MyComponent) myComp: QueryList<MyComponent>; 

ngAfterViewInit() { 
    this.myComp.changes 
      .subscribe((queryChanges) => { 
       // Do something 
      }); 
}