如何从 jQuery 插入的选择器中动态加载 Angular 组件

Question

我们有一个混合的遗留应用程序，由 Spring MVC、jsp 和 jQuery 实现的用例组成。每个用例都是一个由 jsp/jQuery 组成的“组件”构建的 SPA。每个组件都是使用 innerHTML + AJAX 动态加载的。

我们想开始一次重写这个应用程序一个组件，最好的路线是在最内层创建 Angular 组件，然后向外聚合它们，直到每个用例都是同质的 Angular 应用程序。

是否有一种“干净”的方式在 DOM 的 jQuery 加载部分中使用 Angular 组件，例如，当旧版 jQuery 在 Angular 根应用程序“外部”的 DOM 中插入选择器时，动态引导 Angular 组件，类似于Dynamically add components to the DOM 与 Angular 不同，但它来自 Angular。这意味着：从 jQuery 中，告诉 Angular 有一个新的选择器来引导。

Answer 1

我们最终做的（到目前为止）是在启动时引导角度组件，但将它们隐藏起来。 在 AJAX 调用更新 DOM 之后，我们使用 jQuery 将每个组件移动到 DOM 的更新部分。

工作很棒并且保持 Angular 代码干净并且不知道 jQuery，因此当所有 jQuery 被替换时它保持不变。

要将参数传递给 Angular，我们使用带有哈希策略的 Angular 路由器，以便 jQuery 可以通过更改 url 来传递参数。 （当应用程序是纯 Angular 时，将迁移到基于推送。）