在非角度页面内散布 Angular 2 组件 [英] Sprinkling Angular 2 components inside a non-angular page

问题描述

目前正在考虑从 Angular 1 -> Angular 2 的升级路径，我们在 Angular 1 工作中所做的一件事是在面向公众的非应用页面上重用我们的一些组件.

Currently looking at upgrade paths from Angular 1 -> Angular 2 and one things we've done with our Angular 1 work is reuse some of our components on public facing non-app pages.

这些页面实际上是静态 HTML(尽管它们是由 Rails 呈现的)，然后一些 Angular 2 组件被放置到页面中的某些位置.这适用于 Angular 1，我们简单地使用一个模块引导文档元素，该模块提供了我们需要的指令和组件.根本没有路由.

These pages are effectively static HTML (though they are rendered by Rails) and then some Angular 2 components are dropped into the page in places. This worked from with Angular 1, we simply bootstrapped the document element with a module that provided the directives and components we needed. There is no routing at all.

对于 Angular 2，它看起来是要么全有要么全无.你声明了一个根组件，一切都通过它呈现.这对我们来说将是一个重大转变，我希望避免改变我们在这些面向公众的页面上做事的方式.

With Angular 2 it looks like it is all or nothing. You declare a single root component and everything is rendered through that. This would be a big shift for us and I'd like to avoid changing how we are doing things on these public facing pages.

是否可以在静态 HTML 页面中根据需要仅使用 Angular 2 组件，或者我们是否需要移动到单个根元素 SPA 设计?

Is it possible at all to just use Angular 2 components as needed in static HTML pages or will we need to move to a single root element SPA design?

简而言之，我想问的是，是否可以将静态内容与动态角度组件混合在一起，或者所有角度组件都必须存在于页面上的单个根元素中?

In a nutshell, what I'm asking is if it is possible to have a mix of static content with dynamic angular components sprinkled within, or must all angular components live within a single root element on the page?

推荐答案

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

So this is simpler than I originally thought. In the Angular 2 docs it has some specific wording around bootstrapping multiple apps.

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

Bootstrapping Multiple Applications

When working within a browser window, there are many singleton resources: cookies, title, location, and others. Angular services that represent these resources must likewise be shared across all Angular applications that occupy the same browser window. For this reason, Angular creates exactly one global platform object which stores all shared services, and each angular application injector has the platform injector as its parent.

每个应用程序也有自己的私有注入器.当有页面上有多个应用程序，Angular 会处理每个应用程序注入器的服务对该应用程序来说是私有的.

Each application has its own private injector as well. When there are multiple applications on a page, Angular treats each application injector's services as private to that application.

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

So it seems clear that this is intended to be possible and that multiple apps share service resources which is what I would hope for.

我已经对多个自举组件进行了一些简单的测试，并且运行良好.我还没有尝试过的一件事是引导 Angular 2 属性指令 在 Angular 2 组件之外使用.我怀疑这行不通，并且引导程序仅适用于组件而不适用于指令.

I've done some trivial tests with multiple bootstrapped components and it works fine. One thing I have not yet tried is bootstrapping an Angular 2 attribute directive for use outside of Angular 2 components. I suspect that won't work and that bootstrap only works with Components and not Directives.

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

In terms of guidance, I would suggest that Angular 2 is not really designed for sprinkling behaviour throughout a static page and probably should not be used that way. Rather, while you may have multiple sections of your paged defined by multiple apps, that components should make up nearly all of the document/interface.

这篇关于在非角度页面内散布 Angular 2 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！