一尘不染

将Angular 2组件散布在非角度页面中

angularjs

当前正在查看从Angular 1-> Angular 2升级的路径,而我们在Angular
1工作中完成的一件事是在面向公众的非应用程序页面上重用我们的某些组件。

这些页面实际上是静态HTML(尽管它们是由Rails渲染的),然后将某些Angular 2组件放置到页面中。这是从Angular
1开始的,我们只需使用提供所需指令和组件的模块引导文档元素。根本没有路由。

使用Angular
2,看起来它是全部还是全部。您声明一个根组件,所有内容都通过该组件呈现。对于我们来说,这将是一个巨大的转变,我想避免改变我们在这些面向公众的页面上做事的方式。

是否可以根据需要在静态HTML页面中仅使用Angular 2组件,还是我们需要转向单个根元素SPA设计?

简而言之,我想问的是,是否可以将静态内容与动态角度成分混合在一起,还是所有角度成分都必须生活在页面的单个根元素中?


阅读 186

收藏
2020-07-04

共1个答案

一尘不染

因此,这比我最初想的要简单。在Angular
2文档中,
它具有自举多个应用程序的一些特定用语。

引导多个应用程序

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

每个应用程序也都有自己的专用注射器。当页面上有多个应用程序时,Angular将每个应用程序注入者的服务视为该应用程序的私有服务。

因此,显然这是有可能的,并且多个应用程序共享服务资源,这正是我希望的。

我已经对多个自举组件进行了一些琐碎的测试,并且工作正常。我尚未尝试的一件事是引导Angular 2
属性指令以在Angular 2组件之外使用。我怀疑这将不起作用,并且引导程序仅适用于组件而不适用于指令。

在指导方面,我建议Angular
2并不是真正为在整个静态页面上分散行为而设计的,可能不应该这样使用。相反,尽管您可能有多个应用程序定义了页面的多个部分,但这些组件几乎应构成所有文档/界面。

2020-07-04