Angular CDK 门户，多个门户到一个 PortalOutlet？答案

【问题标题】：Angular CDK Portal, multiple Portals to one PortalOutlet?Angular CDK 门户，多个门户到一个 PortalOutlet？
【发布时间】：2019-10-30 10:32:05
【问题描述】：

因此，正如标题所述，是否真的可以使用 Angular CDK 门户/portalOutlets 将多个门户附加到一个 PortalOutlet，我一直在挖掘 CDK 源代码，似乎找不到任何表明它可能的东西.

主要是对portals.ts中的这段代码得出这个结论。

attach(portal: Portal<any>): any {
  if(!portal) {
    throwNullPortalError();
  }

    if(this.hasAttached()) {
  throwPortalAlreadyAttachedError();
}

if (this._isDisposed) {
  throwPortalOutletAlreadyDisposedError();
}

if (portal instanceof ComponentPortal) {
  this._attachedPortal = portal;
  return this.attachComponentPortal(portal);
} else if (portal instanceof TemplatePortal) {
  this._attachedPortal = portal;
  return this.attachTemplatePortal(portal);
}

显然，我可以创建多个portalOutlets，或者在这种情况下说叠加层，并使用componentFactoryResolver将组件门户单独附加到每个叠加层，但这又不是我所追求的场景。

【问题讨论】：

你所追求的场景是什么？门户或多或少是一个专门用于动态实例化组件或模板的屏幕矩形。为什么同时需要多个组件？如果您正在使用叠加层，您仍然可以同时跟踪多个叠加层实例，并通过协调服务管理它们。

标签： angular angular-cdk

【解决方案1】：

这确实是不可能的。您可以做的是为您的门户制作一个通用容器，然后仅将该容器附加/分离到 PortalOutlet，具体取决于是否有 1 个或多个要显示的门户。

您必须创建自己的附加视图逻辑，但使用 viewContainerRef 非常简单

【讨论】：

所以我的一位同事正在挖掘有角度的 cdk 网站 - material.angular.io/components/menu/overview 并注意到如果您检查页面元素，确实似乎有一个覆盖容器，其中包含多个覆盖容器，如果您也能帮助详细说明这一点，将不胜感激。
感谢您将我指向 viewContainerRef 似乎更适合目的。
@Munerz 不客气 :) 关于菜单，如果你在谈论子菜单，这些都是单独的 TemplatePortals（参见 here）投影在 cdk-overlay-container 中。该容器来自Overlay 类，而不是OverlayRef。所以在任何时候都只有一个cdk-overlay-container，正如你所看到的here
大家好，我正在尝试实现类似的目标。可以请你参加 Stackblitz 吗？