角度 - 动态组件生成

Angular - dynamic component generation

本文关键字：组件 动态 角度      更新时间：2023-09-26

我希望得到一个架构问题的答案，并通过使用模态作为示例的上下文来回答。所以对于初学者来说，请不要用"使用bootstrap的模式服务"来回答这个问题。

基本上，我想知道当需要 html 凭空出现并对其应用组件或指令时，"角度方式"是什么。数据请求错误模式就是一个很好的例子：例如，如果一个组件尝试加载某种数据，并且数据返回某种错误，我希望数据服务能够以编程方式触发模式。

这就引出了一个问题：在这种情况下，模板去哪里了？除非我弄错了，否则不会为页面上没有的标记编译指令，从架构的角度来看，这是可取的（例如，我不希望页面上的代码不太可能被使用，例如在错误模式的情况下，这不是很常见）。服务必须附加到控制器，除非我在页面上有标记，否则不会添加该控制器。

那么，激活页面加载时基本上（在我看来，最好如此）不存在的组件的模式是什么？理想情况下，我希望完全忽略模态组件，直到用户体验需要它。到目前为止，ng-if 语句，通过在页面上的某个地方包含单个div，似乎是最好的方法。但即使这样在技术上也是"混乱的"，因为您正在向仅支持"潜在"案例的页面添加标记。

能够从某些服务或控制器或指令广播"triggerErrorModal"事件，向其传递一些参数，并让应用程序启动模态组件，那就太好了。请注意，还有其他情况可以工作，因此请将其视为更普遍的问题。

思潮？

我知道你说过你不想被发送到bootstrap的模态服务。然而。。查看源代码提供了有关如何执行此操作的大量信息。

基本上，您可以使用以下方法添加HTML元素：

var el = angular.element('<div class="new-thing"><my-directive></my-directive></div>')

将其添加到页面：

var body = $document.find('body').eq(0);
body.append(el)

然后通过以下方式编译：

var compiled = $compile(el)($scope);
相关文章：