AfterViewInit 각도 2에서 @ViewChild를 인스턴스화

Question

나는 애플 리케이션의 사용 중에 추가하지만 뷰 자식의 값은 항상 정의되지 않은 동적 템플릿에 대한 참조를 만들려고 했으므로 After View에서 인스턴스화 할 수 있는지 묻고있었습니다. 초기화?
감사합니다. 나는 드래그 라이브러리를 사용하고 있는데 드래그 된 요소를 놓을 때 구성 요소를 만들고 싶습니다. 문제는 생성 할 구성 요소가 동일한 페이지에로드 된 많은 구성 요소에서 사용되므로 ' '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 

    });; 
    }