Не удается прочитать свойство 'createComponent' из неопределенного в ngAfterViewInit

Question

Я пытался создать пример динамического загрузчика компонентов, чтобы проверить некоторые идеи, однако мне не удалось заставить его работать. Я проследил документацию Angular до T и даже исследовал здесь решения на SO. Ничто не дало мне никакого прогресса, и я не уверен, куда идти.

При запуске кода я получаю ошибку "Cannot read property 'createComponent' of undefined at ParentComponent.ngAfterViewInit"

Я использую Angular 8, еслиэто важно, но, насколько я могу судить, это звук, но я никогда не смогу показать свой компонент. Мысли?

Ниже мой код:

parent.component.ts

export class ParentComponent implements AfterViewInit {
    @ViewChild('ref', { static: true, read: ViewContainerRef }) ref: ViewContainerRef;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver
    ) { }

    ngAfterViewInit(): void {
        const factory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
        this.ref.createComponent(factory);
    }
}

parent.component.html

    <div fxFlex="grow" fxLayout="column" ngClass="scroll">
        <ng-template ref></ng-template>
    </div>

Answer 1

При определении ссылочной переменной шаблона убедитесь, что перед именем переменной стоит символ хеша #. В данном случае синтаксис шаблона будет:

<ng-template #ref></ng-template>