Angular 4：如何在ng-template中访问元素

Question

I have a view which holds ng template for MD-Dialog.

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

Where I have to replace #content with a dynamic component.

corresponding component class is,

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)
  }
}

But I get undefined for this.container in method open(). Please help.

Answer 1

只有在初始化视图时，模板内部的模板才可访问。因此，在角度8之后，使用ViewChild时，可以使用参数{static: false}这样可以在初始化视图时使用内部模板的实例

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