Динамически создавать компонент внутри динамически созданного компонента - PullRequest
Новая
       9

Динамически создавать компонент внутри динамически созданного компонента

0 голосов
/ 01 мая 2020

Как видно из заголовка, я пытаюсь создать компонент динамически внутри компонента, который также был динамически создан.

У меня есть этот класс здесь 

export class DefaultLayoutComponent {

    constructor(private cdRef: ChangeDetectorRef, public defaultLayoutService: DefaultLayoutService,
    private resolver: ComponentFactoryResolver) {
    }

    @ViewChild("appAsideContainer", { read: ViewContainerRef }) appAsideContainer: ViewContainerRef;

    ngOnInit() {

        //other component can call a method on the service, to control the layout...
        this.defaultLayoutService.e_openAppAside.subscribe(params => {

            let appAsideRef;

            //if there are no component inside it already, create one at least
            if (this.appAsideContainer.length == 0) {
                const appAsideFactory = 
                this.resolver.resolveComponentFactory(CustomAppAsideComponent);
                appAsideRef = this.appAsideContainer.createComponent(appAsideFactory);
            }

            let appAsideComponent = <CustomAppAsideComponent>appAsideRef.instance;

            //create comp. dynamically
            const factory = this.resolver.resolveComponentFactory(params.type);
            let component = appAsideComponent.container.createComponent(factory);

            //append all input values to components
            if (params.inputs) {
                for (let p in params.inputs) {
                    component.instance[p] = params.inputs[p];
            }


        });        
    }
 }

проблема в том, что члены appAsideComponent недоступны. Похоже, что он не полностью создан.

enter image description here

Здесь обсуждается CustomAppAsideComponent 

export class CustomAppAsideComponent {
  /** custom-app-aside ctor */
  constructor() {

  }

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

И его разметка: 

<app-aside [fixed]="true" [display]="false">
    <ng-template style="border: solid 2px;" #container></ng-template>
</app-aside>

app-aside - это компонент, который генерирует боковую панель, которая открывается вертикально вправо.

Обычно я могу создать другие компоненты без проблем, используя этот метод, но он не работает на этом , И AppAsideComponent, и CustomAppAsideComponent находятся в моем модуле entryComponent

Что-нибудь очевидно, что я пропускаю?

...