Question

我有一个视图，其中包含MD-Dialog的模板。

<ng-template #template>
  <h2 md-dialog-title>{{title}}</h2>
  <div md-dialog-content #content></div>
</ng-template>

我必须用动态组件替换#content。

相应的组件类是，

export class CustomDialogComponent implements OnInit, AfterViewInit {

  title: string;

  @ViewChild('content', { read: ViewContainerRef }) container;

  @ViewChild('template') template: TemplateRef<any>;

  constructor(public dialog: MdDialog,
    private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
  }

  open(component: any, options: any): void {

    this.title = options.title;
    console.log(this.container)
    const dialogRef = this.dialog.open(this.template, options);
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    this.container.clear();
    const comp = this.container.createComponent(componentFactory);
    comp.instance.setData(options.data);

  }

  close() {
    this.dialog.closeAll();
  }

  ngAfterViewInit() {
    console.log(this.container)
  }
}

但是我在方法open（）中为this.container得到了未定义。请帮忙。

Answer 1

模板中的

template仅在视图初始化时才可访问，因此角度8之后，使用ViewChild时，可以使用参数{{1} 这样，您可以在初始化视图时获得内部模板的实例

{static: false}

Angular 4：如何访问ng-template

1 个答案: