Блог

Я работаю над проектом Ionic / Angular, в котором я пытаюсь динамически добавлять компоненты на страницу. Для создания компонента я использую Angulars ComponentFactoryResolver. При добавлении компонентов в представление они добавляются как родственные для целевого контейнера, а не как дочерние.

instrument.page.ts

 @Component({
    selector: 'app-instruments',
    templateUrl: './instruments.page.html',
    styleUrls: ['./instruments.page.scss'],
})
export class InstrumentsPage implements AfterViewInit {

    instruments: Instrument[];

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

    constructor(
        private data: DataService,
        private resolver: ComponentFactoryResolver
    ) {
        this.instruments = data.getInstruments();
    }

    ngAfterViewInit() {
        this.createComponents();
    }

    createComponents() {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(InstrumentCardComponent);
        this.data.getData().forEach((organization: Organization) => {
            organization.getGroups().forEach((group: Group) => {
                group.getFields().forEach((field: Field) => {
                    field.getInstruments().forEach((instrument: Instrument) => {
                        let component = this.entry.createComponent(factory);
                        component.instance.instrument = instrument;
                        component.instance.field = field;
                        console.log(component);
                    });
                });
            });
        });
    }
}
  

instrument.page.html

 <ion-content #instrumentscontainer>
</ion-content>
  

Я решил эту проблему, поместив

 <ng-container #instrumentcontainer></ng-container> 
  

внутри элемента ion-content, насколько я понял, удаляется из DOM во время выполнения.