ViewChild 在 templateUrl 中未定义，但在模板中未定义

Question

我正在尝试动态注入 angular 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

"target" 从未被定义。

所以有趣的是，当我将代码放在模板中时，目标代码可以工作，但是当它位于 templateUrl html 代码中时，它不会。

更新：所以我找到了问题而不是解决方案

问题是我在 html 中的标签在另一个组件的标签中

代码在这个组件的html里面

<grid></grid>

当我在网格组件的外部带出 div 标签时，它起作用了。所以我的问题是如何在网格组件中访问它。

Answer 1

好的，所以解决方案是移动

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

向上进入GridComponent

然后将网格组件引用为

@ViewChild(GridPageComponent) gridPageComponent: GridPageComponent;

现在我可以访问目标了

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

ViewChild 在 templateUrl 中未定义，但在模板中未定义

ViewChild is undefined within the templateUrl, but not the template

code-injection

angular2-components

angular