AfterViewInitで@ViewChildをインスタンス化する

Question

私は、アプリケーションの使用中に追加する動的テンプレートへの参照を作成しようとしていましたが、ビューの子の値は常に未定義であるため、After Viewその中に ？ありがとうございます。
ありがとうございます。 私はdragulaライブラリを使用しています。ドラッグされた要素をドロップするときにコンポーネントを作成したいのですが、作成するコンポーネントが同じページにロードされている多くのコンポーネントで使用されているため、 'html要素には別のローカル変数があり、後でその子にアクセスできるようにビューの子を使用したいと考えています。

@ViewChild('viewerheader',{ read: ViewContainerRef }) viewerContainer; 
 
    constructor(private dragulaService: DragulaService,private componentFactoryResolver: ComponentFactoryResolver) { 
 
    dragulaService.drop.subscribe((value) => { 
 
     //console.log('dropped header sunbscribed' , value) ; 
 
     this.onDrop(value.slice(1)); 
 

 
    }); 
 
    } 
 

 
ngOnInit() { 
 
    this.element = document.getElementById('sectionheader0'); 
 
     console.log ('got element' ,this.element); 
 
     $(this.element).append('<ng-template #viewerHeader></ng- template>'); 
 
    } 
 
private onDrop(args) { 
 
    let [e, target ,source,el] = args; 
 
    this.createComponent(e.id); 
 
    } 
 
    
 
    
 
createComponent(id : string){ 
 
    //this.viewerContainer.clear(); 
 
    const factory = this.componentFactoryResolver.resolveComponentFactory(Viewer); 
 
    const componentRef = this.viewerContainer.createComponent(factory); 
 
    componentRef.instance.id = id; 
 
    console.log('create Compnent called + Id' + id); 
 
    
 
    console.log('create component' + id); 
 
    }

Answer 1

この方法を試してみてください。 AfterViewInitフックのViewChildの変更を登録します。

ngAfterViewInit() { 
    this.viewerContainer.changes.subscribe(() => { 
    // do anything here since you are sure that view child is defined 

    });; 
    }