我正在做一个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>