Dynamic 将组件动态添加到选项卡2

目标是从列表中动态加载组件，并将其与相关选项卡一起显示。 我的制表方法基于本教程：和

如果您只想通过将每个组件包装在选项卡中来硬编码，那么这将非常有用。不幸的是，当尝试在ng内容中动态加载组件时，这种方法失败了

我确实看到了yurzui的回答，这非常接近我想要实现的目标

下面的这段代码（参见上面的链接）是我无法弥合这个示例与我的代码之间差距的地方。在我的示例中，我不知道要传递给createComponent（）的参数是什么。把这段代码放在哪里，目前我有createTab指令来保存这段代码。如果我应该将指令放在“tabs”元素或 “tab”元素

带回家的消息是，我想用动态创建的组件来代替标签页的ng内容，然后标签页的ng内容将由标签页填充

这是我实现这一目标的微弱尝试

add() {
        const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
        const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);

        let bodyRef = this.vcRef.createComponent(bodyFactory);
        let footerRef = this.vcRef.createComponent(footerFactory);

        const cardFactory = this.cfr.resolveComponentFactory(CardComponent);

        const cardRef = this.vcRef.createComponent(
            cardFactory,
            0,
            undefined,
            [
               [bodyRef.location.nativeElement],
               [footerRef.location.nativeElement]
            ]
        );

        this.components.push(bodyRef, cardRef, footerRef);
    }