在 Angular2 中使用动态组件时出现错误“错误类型错误：无法读取未定义的属性‘createComponent’”

Question

我正在尝试在 angular4 中动态添加组件。我检查了其他问题，但找不到解决方案。我收到错误

错误类型错误：无法读取未定义的属性“createComponent”

关于动态组件。

adv.组件.ts

import { Component, OnInit, AfterContentInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { SampleComponent } from '../sample/sample.component';
@Component({
  selector: 'app-adv',
  templateUrl: './adv.component.html',
  styleUrls: ['./adv.component.css']
})
export class AdvComponent implements OnInit, AfterContentInit {
  @ViewChild('container', {read:'ViewContainerRef'}) container;
  constructor(private resolver : ComponentFactoryResolver) { }

  ngOnInit() {
  }

  ngAfterContentInit(){
    const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
    this.container.createComponent(sampleFactory);
  }

}

adv.component.html

<div #container></div>

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AdvComponent } from './adv/adv.component';
import { SampleComponent } from './sample/sample.component';

@NgModule({
  declarations: [
    AppComponent,
    AdvComponent,
    SampleComponent
  ],
  entryComponents:[
    SampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

关于ngAfterViewInit文档：​

在 Angular 初始化组件的视图和子视图后响应。

尽管ngAfterContentInit：

在 Angular 将外部内容投影到组件视图中后做出响应。

所以子视图还没有准备好ngAfterContentInit，所以移动这部分

ngAfterContentInit(){
    const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
    this.container.createComponent(sampleFactory);
  }

到

ngAfterViewInit() {
    const sampleFactory = this.resolver.resolveComponentFactory(SampleComponent);
    this.container.createComponent(sampleFactory);
}

还改变：

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

到

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