首页 文章

在Angular中显示应用程序根目录之外的托管视图

提问于
浏览 次
2

为了与执行DOM操作的原生本地JavaScript库集成，我希望能够将Angular管理的视图附加到 document 中的任何DOM元素 .

假设SomeLibrary在DOM中的某个位置创建了一个容器（我们为它提供了一个可以注入其HTML的目标节点）：

<body>
    <angular-app-root>
        <!-- here... -->
        <div id="some-library-created-this"></div>
    </angular-app-root>

    <!-- or more likely, here... -->
    <div id="some-library-created-this"></div>
</body>

我有一个对 div#some-library-created-this DOM节点的引用 .

现在，我有一个可以像这样使用的Angular组件：

<angular-component [angularInput]="value">
    <!-- what follows isn't the `template`, but what would get set in a ng-content inside of AngularComponent's template -->
    <h1>Embedded Content Children</h1>
    <hr>
    <another-angular-component></another-angular-component>
</angular-component>

这个 AngularComponent 现在应该获取其中设置的内容，并将其显示在我们已经拥有的 div#some-library-created-this 节点内 .

也就是说，组件的内容不会显示在已声明组件的位置，而是显示在任何给定本机元素中的其他位置 .

像这样的东西：

<body>
    <angular-app-root></angular-app-root>

    <div id="some-library-created-this">
        <some-kind-of-wrapper> <!-- ? -->
            <h1>Embedded Content Children</h1>
            <hr>
            <another-angular-component></another-angular-component>
        </some-kind-of-wrapper>
    </div>
</body>

这甚至可能吗？是否有相同的解决方案可以让我从SomeLibrary _2953278的功能中受益？

我已经阅读了一些显示类似和高级用例的帖子，如下所示：

但是那些只谈论创建事先已知的组件，并专门为给定的视图创建它们，而不仅仅是把它们扔到屏幕上的其他地方 .

angular dom angular2-template dom-manipulation

1 回答

  • 1

    我设法用 <ng-template> 做了，这更好，因为在本机库显示其DOM元素之前，组件内的视图没有实例化 . 此外，这让我可以在同一个组件体内定位本机库的不同DOM节点，如下所示：

    <angular-component [angularInput]="value">
  <form *angularComponentPartial [formControl]="myForm">
    ...
  </form>

  <ng-container *angularComponentPartial="angularComponentTargets.otherKnownDomNode">
    Send ({{ secondsLeft }} seconds left)
  </ng-container>
</angular-component>

    自定义 *angularComponentPartial 结构指令用于获取用户定义内容的TemplateRef . 然后，它创建一个特殊组件，并在 ComponentFactoryResolver 的帮助下将其安装在库DOM节点上 . 它将TemplateRef传递给该组件，该组件的唯一作用是显示模板，这要归功于一个简单的模板插座：

    <ng-container *ngTemplateOutlet="template"></ng-container>

    AngularComponent甚至不必处理伪转换逻辑 . 仅涉及结构指令和微小的模板支架组件 .

    如果你're interested about the implementation in the details, that'是开源的！我在toverux/ngsweetalert2中使用它（在写作时，它仍然在 next 分支中） . 它用于在SweetAlert2模式中显示动态内容 .

    回复于

相关问题