Nie można odczytać właściwości "viewContainerRef" nieokreślonej - kątowej, kątowej, kątowej

Próbuję wyświetlić składnik dynamiczny podobny (nie dokładny) do przykładu w kątowych dokumentach.

Mam dyrektywę dynamiczną z viewContainerRef

@Directive({
selector: "[dynamicComponent]"
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}

Fragment kodu komponentu

@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective;
..
ngAfterViewInit() {
let componentFactory = null;
console.log(component);
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
// this.adHost.viewContainerRef.clear();
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.createComponent(componentFactory);
}

Wreszcie dodane <ng-template dynamicComponent></ng-template> w szablonie

Odpowiedzi:

Możesz przyjąć takie podejście: nie twórz dyrektywy, zamiast tego daj Id ng-template

<ng-template #dynamicComponent></ng-template>

posługiwać się @ViewChild dekorator wewnątrz swojej klasy komponentów

@ViewChild("dynamicComponent", { read: ViewContainerRef }) myRef

ngAfterViewInit() {
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
const ref = this.myRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}

Miałem ten sam problem. Musisz dodać dyrektywę do AppModuł:

 @NgModule({
declarations: [
AppComponent,
...,
YourDirective,
],
imports: [
...
],
providers: [...],
bootstrap: [AppComponent],
entryComponents: [components to inject if required]
})