斯科蒂，让我兴奋，—在Angular中传送模板

In this article, I want to discuss an interesting problem I recently came across, and the solution I came up for it. Imagine the following layout:

在本文中，我想讨论一个我最近遇到的有趣问题，以及为之提出的解决方案。 想象以下布局：

We have the application navigation bar component at the top of the page, and we render a third-party directive inside the current page. In my case, the directive is a wrapper for a graph library.

我们在页面顶部具有应用程序导航栏组件，并在当前页面内部呈现第三方指令。 就我而言，该指令是图形库的包装器。

The product requirement is to add an export button for our graph in the navigation component:

产品要求是在导航组件中为我们的图形添加一个export按钮：

As you can probably imagine, we have an issue. We don’t have access to the directive’s API that exposes the export method from the navigation component. One solution would be to manage this whole operation with events, but it’s a bit overkill and not reusable.

如您所料，我们有一个问题。 我们无权访问该指令的API，该API公开了来自导航组件的export方法。 一种解决方案是使用事件来管理整个操作，但是这样做有点过头，而且不可重用。

If we think about it, logically, the button‘s template belongs to this component. But from a technical point of view, it would be preferable to move this part somewhere else in the DOM, outside this component. Or in other words, we want to teleport this template to another place in the DOM while keeping its context where it’s defined.

如果我们考虑一下，从逻辑上讲，按钮的模板属于此组件。 但是从技术角度来看，最好将此部分移到DOM中该组件之外的其他位置。 换句话说，我们希望将此模板传送到DOM中的另一个位置， 同时保留其定义的上下文 。

So what if we could just do the following:

那么，如果我们可以做以下事情怎么办：

Let’s create a teleportTo directive that takes a DOM selector and appends a template content to it:

让我们创建一个teleportTo指令，该指令采用DOM选择器并将模板内容附加到该选择器：

First, we create a view from the template and call detectChanges. Next, we obtain a reference to the host element. The viewRef exposes the rootNodes property, which contains the view’s DOM nodes; so finally, we loop over those nodes and append each one to the host.

首先，我们从模板创建一个视图，然后调用detectChanges。 接下来，我们获得对host元素的引用。 该viewRef公开rootNodes属性，它包含视图的DOM节点; 因此，最后，我们遍历这些节点并将每个节点附加到host 。

You can also use the Portal feature from Angular Material to achieve the same thing, but I prefer not using a 3rd party tool when I don’t have to, and it’s always good to know how something works under the hood.

您还可以使用Angular Material的Portal功能来实现相同的目的，但是我更愿意在不需要时不使用第三方工具，并且知道某些东西在幕后如何工作总是很好。

🚀万一您错过了 (🚀 In Case You Missed It)

Here are a few of my open source projects:

这是我的一些开源项目：

• Akita: State Management Tailored-Made for JS Applications

  秋田 ：为JS应用量身定制的国家管理

• Spectator: A Powerful Tool to Simplify Your Angular Tests

  Spectator ：简化角度测试的强大工具

• Transloco: The Internationalization library Angular

  Transloco ： Angular国际化图书馆

• Forms Manager: The Foundation for Proper Form Management in Angular

  表单管理器 ：Angular中正确表单管理的基础

• Cashew: A flexible and straightforward library that caches HTTP requests

  腰果 ：一个灵活而直接的库，用于缓存HTTP请求

And many more!

和许多更多！

Follow me on Medium or Twitter to read more about Angular, Akita and JS!

在 Medium 或 Twitter上 关注我， 以了解有关Angular，Akita和JS的更多信息！

翻译自: https://netbasal.com/beam-me-up-scotty-on-teleporting-templates-in-angular-a924f1a7798