使用 cdk/ComponentPortal 动态添加组件

Question

我正在尝试使用 cdk 的 ComponentPortal 动态添加组件

@Component {
    selector: 'my-app',
    template: '<div #container></div>',
    styleUrls: [ './app.component.css' ]
}
export class AppComponent  {
    @ViewChild('container',  {read: ViewContainerRef, static: false}) container;

    ngAfterViewInit(): void { 
        const dialogContent = new ComponentPortal(BarfooComponent, this.container);
    }
}

DEMO

正如您从演示中看到的那样，此代码不会抛出任何错误，但也不会呈现任何内容:(

因此，我不确定 ComponentPortal 是否可以实现类似的功能，如果可以，我可能会错过这里的一个或多个步骤。有什么建议吗？

Answer 1

您必须附加创建的组件门户。您可以通过 cdkPortalOutlet 之类的指令或手动完成。 CDK Docs Portals - 它是 Portals 的文档，其中提供了有关如何操作的示例。

Here 是 stackblitz 上的固定示例。不要忘记包含来自 @angular/cdk/portal 的 PortalModule。此模块提供 cdkOverlayPortal 指令。

您似乎想要创建对话框。 Angular CDK 为这种情况提供了抽象：Portals 和 Overlays。

所以计划是： - 创建一个门户 - 创建一个覆盖 - 将门户附加到叠加层

因此 here 是使用叠加层和门户的演示。

如果我没记错的话，您还必须从 cdk 添加预建样式。您必须将它们添加到 angular.json 文件的 architect.build.options.styles 数组中。您必须在此处添加 node_modules/@angular/cdk/overlay-prebuilt.css 之类的内容。如果您使用自定义捆绑包，则必须手动处理它。

CDK Docs Overlays - 有关覆盖的更多信息在文档中。

使用 cdk/ComponentPortal 动态添加组件

Add component dynamically with cdk/ComponentPortal

angular

angular-cdk