在非角度页面中喷洒Angular 2组件

Question

目前正在查看Angular 1 - > Angular 2的升级路径,我们使用Angular 1工作完成的一件事就是在面向公众的非app页面上重用我们的一些组件.

这些页面实际上是静态HTML(尽管它们由Rails呈现),然后一些Angular 2组件被放入页面中.这与Angular 1一起工作,我们只是使用提供我们需要的指令和组件的模块来引导文档元素.根本没有路由.

使用Angular 2,它看起来像是全有或全无.您声明了一个根组件,并通过该组件呈现所有内容.这对我们来说是一个很大的转变,我想避免改变我们在这些面向公众的页面上做事的方式.

是否可以在静态HTML页面中根据需要使用Angular 2组件,还是需要转移到单个根元素SPA设计？

简而言之,我要问的是,是否可以混合使用静态内容和动态角度组件,或者必须将所有角度组件都放在页面上的单个根元素中？

Answer 1

所以这比我原先想象的要简单.在Angular 2文档中,它有一些关于引导多个应用程序的特定措辞.

引导多个应用程序

在浏览器窗口中工作时,有许多单例资源:cookie,标题,位置等.表示这些资源的Angular服务同样必须在占用相同浏览器窗口的所有Angular应用程序之间共享.因此,Angular只创建一个存储所有共享服务的全局平台对象,每个角度应用程序注入器都将平台注入器作为其父级.

每个应用程序也有自己的私人注入器.当页面上有多个应用程序时,Angular会将每个应用程序注入器的服务视为该应用程序的私有.

所以很明显,这是可能的,并且多个应用程序共享服务资源,这是我希望的.

我已经用多个自举组件做了一些简单的测试,它工作正常.我尚未尝试的一件事是引导Angular 2 属性指令以在Angular 2组件之外使用.我怀疑它不起作用,并且引导程序仅适用于组件而不是指令.

在指导方面,我建议Angular 2并非真正设计用于整个静态页面中的洒水行为,并且可能不应该以这种方式使用.相反,虽然您可能有多个应用程序定义的分页的多个部分,但这些组件应构成几乎所有文档/界面.