如何在纯JavaScript页面上的不同DOM节点上注入Angular 2组件？

Question

用例:客户端想要构建一个由Angular 2组件组成的库,但向该库的最终用户(开发人员)公开抽象的,与技术无关的接口,以便这些用户可能使用纯JavaScript并且不知道图书馆的内部.

困难来自以下方面:

1. 有一个页面,它使用纯JavaScript.本页面由第三方开发.
2. 第三方应该能够在页面上的特定位置(DOM节点)插入给定的Angular 2组件.
3. 假设组件是<mg-input>,它应该显示在普通JavaScript页面的标题中,但不仅仅是在那里 - 也在页面下方的表单中.两个不同的地方,两个不同的DOM节点,它们之间有普通的html.

问题:我们如何在特定DOM节点上引导组件,以及如何将配置(不是基元而是复杂对象)传递给这些组件？

在React世界上,这是通过简单地运行完成ReactDom.render(domEl, <CustomInput nonPrimitiveConfig={config}/>),并取决于什么domElи config时,该组件将在不同的地方有不同的配置呈现.

如何在Angular 2中做到这一点？

Answer 1

也许会问为什么他们特别想要 Angular 2 组件？

我们编写了一个独立的“小部件”，由 javascript API、UI 和样式组成。应用程序的开发人员调用 JavaScript 函数来触发它。

开发人员所需的一切都以零库依赖关系打包。

您的替代方案是开发减去 UI 的组件（例如闭包/SEF）。然后，客户端应用程序可以使用他们想要的任何 UI 技术。