Angular 飞镖门户

Question

我正在寻找有关如何在 Angular Dart 中实现 DOM 或组件门户的一些示例或文档。我在 Angular 组件包文档中找到了 portal.dart 源代码和 Portal 库的定义，但我对门户还不够熟悉，无法仅使用这些资源来实现它们。

我想将

传送到另一个容器，以便使用 CSS 变换进行拖动。

有点像，

DOMPortalHost portalHost;
Portal<HTMLElement> portal;

@ViewChild('host')
DivElement host;

void onMouseDown(Element element) {
    this.portal = Portal(element);
    this.portalHost = DOMPortalHost(host);

    this.portalHost.attach(portal);
}

void onMouseUp(Element element) {
    this.portalHost.Detach();
}

谢谢。

Answer 1

您需要一个扩展 BasePortalHost 的主机（一个很好的例子是 PortalHostDirective）并且门户项目可以是 TemplatePortal 或 ComponentPortal。
主机附加项目，项目自行分离。

MaterialStepperComponent 是一个很好的完整示例。

但是，我认为您应该通过在 mousedown 上交换它们来使用您的业务模型列表，然后让 ngFor 负责打印它们。

Angular 飞镖门户

Angular Dart Portals

angular-dart

angular