javascript - ข้อผิดพลาด "ERROR TypeError: ไม่สามารถอ่านคุณสมบัติ 'createComponent' ของ undefined" เมื่อทำงานกับคอมโพเนนต์แบบไดนามิกใน Angular2

ฉันกำลังพยายามเพิ่มคอมโพเนนต์แบบไดนามิกใน Angular4 ฉันได้ตรวจสอบคำถามอื่น ๆ แต่ไม่พบวิธีแก้ปัญหา ฉันได้รับข้อผิดพลาด

ข้อผิดพลาด TypeError: ไม่สามารถอ่านคุณสมบัติ 'createComponent' ของค่าที่เป็น undefined

บนส่วนประกอบที่มีการเคลื่อนไหว

adv.component.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>

app.module.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 { }

คำตอบ #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