将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仅创建一个存储所有内容的全局平台对象 共享服务，并且每个角度应用程序注入器都具有 平台注入器作为其父代.

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屋！