ViewChild在模板图中不确定，但不是模板

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位置

错误：

无法读取未定义的

的属性'createComponent'

"目标"永远不会被定义。

所以有趣的是，当我将代码放入模板中时，目标代码有效，但是当它在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();