1

目标是从列表中动态加载组件并将它们与关联的选项卡一起显示。 我制作标签的方法基于本教程：https ://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/和

如果您只想通过将每个组件包装在选项卡中来对每个组件进行硬编码，这将非常有用。遗憾的是，这种方法在尝试动态加载 ng-content 中的组件时失败了。

我确实看到了 yurzui 的这个答案，Creating a angular2 component with ng-content dynamic这与我想要完成的非常接近。

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

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);
    }

带回家的消息是我想将动态创建的组件代替选项卡的 ng-content。然后选项卡 ng-content 将由选项卡填充。

这是我实现这一目标的微弱尝试。http://plnkr.co/edit/ieSNgqusP0rwZBMQSvYQ?p=preview

4

0 回答 0