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

错误：

无法读取属性＆＃39; createComponent＆＃39;未定义的

＆＃34;目标＆＃34;永远不会定义。

有趣的是，当我将代码放在模板中时，目标代码可以工作，但是当它在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中未定义，但不是模板

1 个答案: