ViewChild는 templateUrl 내에서 정의되지 않지만 템플릿이 아닙니다.

Question

각도 4의 구성 요소를 동적으로 주입하려고합니다. 성공적으로 수행 할 수 있지만 문제는 타이를 만들려고 할 때입니다. 그걸 목표로

<div> 
    <ng-template #detailedGrid></ng-template>  
</div> 

내 코드에서 렌더링 할 때 내 목표가 정의되지 않았다는 오류가 계속 발생합니다.

@Component({  
    templateUrl: '../../common/components/grid/templates/grid.html' 
    //template: `<div #detailedGrid></div>` 
}) 
export class ListComponent implements OnInit, AfterViewInit { 
    @ViewChild('detailedGrid', {read: ViewContainerRef}) target: ViewContainerRef; 

constructor(private componentFactoryResolver: ComponentFactoryResolver, 
      private viewContainerRef: ViewContainerRef) {} 

ngAfterViewInit() { 

const factory = this.componentFactoryResolver.resolveComponentFactory(DetailedListComponent); 
     const ref = this.viewContainerRef.createComponent(factory); // <-- this one works 
     // const ref = this.target.createComponent(factory); // <-- This one does not work 
     ref.changeDetectorRef.detectChanges(); 
} 

단지 본질적으로 작동 페이지 하단에 추가 한 다음은

는 축소 코드입니다. 내가 뭘 걸려 라하면 DIV의 위치에

오류를 주입입니다 :

Cannot read property 'createComponent' of undefined

은 "대상"정의되지 없구요.

흥미로운 점은 템플릿에 코드를 넣을 때 대상 코드가 작동하지만 templateUrl html 코드 안에있을 때 흥미 롭습니다.

업데이트 : 그래서 나는 문제 만이 아니라 솔루션 문제는 HTML 내 태그

코드이 구성 요소에서 HTML 내부에 또 다른 구성 요소의 태그 내에 있다는 것이다

을 파악

<grid></grid> 

그리드 구성 요소의 바깥쪽에 div 태그를 가져 오면 효과가있었습니다. 내 질문에 어떻게 그리드 구성 요소 내에서 액세스 할 수 있습니다.

Answer 1

확인하므로 용액 이제 타겟 액세스 할 수

그럼

@ViewChild(GridPageComponent) gridPageComponent: GridPageComponent; 

같은 그리드 구성 요소를 참조하는 GridComponent에 가입

@ViewChild('detailedGrid', {read: ViewContainerRef}) 
public detailedGrid: ViewContainerRef; 

이동하는

const factory = this.componentFactoryResolver.resolveComponentFactory(PatientsDetailedListComponent);    
const ref = this.gridPageComponent.detailedGrid.createComponent(factory); 
ref.changeDetectorRef.detectChanges();