Angular 4 : How to access element inside ng-template

Question

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

<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

模板中的模板只有在初始化 View 时才能访问，所以angular 8之后，使用ViewChild时，可以使用parameter{static: false}这样你就可以在初始化 View 时拥有内部模板的实例

@Viewchild('content', {static: false}) innerConttent: TemplateRef<any>;