角度指令将自身（选择器）附加到文档中是一种好习惯吗？答案

【问题标题】：Is it a good practice for angular Directive append itself (selector) into the document?角度指令将自身（选择器）附加到文档中是一种好习惯吗？
【发布时间】：2019-07-15 01:15:14
【问题描述】：

我正在使用 ng-bootstrap 使用 selector:<test-modal> 创建一个模式对话框。我本来想把它做成一个组件。但是它就像导航栏一样，我需要将它放在 AppComponent 中，并且每个页面都共享相同的模态组件。逻辑似乎不正确。

所以我尝试制定一个指令，而不是允许每个页面都可以拥有自己的模式。但是后来我把<test-modal> 放在每个“可能”需要模态的组件中。所以每个页面无论是否提示模态都必须包含此代码。我不确定这是否是正常做法。

然后我发现这个页面： https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box 它使 modal 成为动态指令，并在需要时将 <test-modal> 附加到文档 html 并且正在调用该指令。这是最佳做法吗？提前致谢。

【问题讨论】：

使用primeng或angular-material modal。
我使用 ng-bootstrap 模态作为基础。我想让它更容易使用，所以我将它包装到我的自定义指令中。所以当我需要模态（每次不同的味精）时，我可以简单地初始化指令和模态出来。我的概念对吗？

标签： angular directive

【解决方案1】：

Dynamic adding components or directives 是 Angular 中记录的一种技术，因为它提供了一种动态添加组件/指令的方法，例如我们想要使用的那一刻不是在应用程序引导时。这是 Angular 中的常规做法，文档指定为 here。

一个重要的事情是它不会破坏每次触发时都会添加新组件，这可能会不时降低应用程序的性能。所以只需添加one or limited number of dynamic components 并尝试重复使用将有助于提高性能。在您的情况下，对于populating a modal，它应该只添加一个组件来包装一个模式，然后每次调用它时输出不同的消息。

【讨论】：

感谢您的回答。让我看一下文档。但是如果使用组件来包装模态，这意味着我必须将选择器放在 AppComponent 的模板中吗？所以必须在这里，即使客户端不需要提示模态？还是有更好的办法？
无需添加<test-modal>，dynamic component loading 可以帮你做到。我上面提到的文档中有一个示例可以帮助您实现这一目标。
但在 url 示例中，需要<app-ad-banner> 将动态组件嵌入其中。所以就我而言，我必须创建一个<xx-modal>，然后使用viewContainerRef 将<test-modal> 嵌入其中？但是 <xx-modal> 需要放入 Appcomponent 模板。我不知道我是否理解正确。