Angular 2 - 不同静态页面上任何布局中的多个组件

Question

我有一堆使用各种组件的静态页面，这些组件可以放置在 HTML 设计人员喜欢的任何地方。例如在 WordPress 网站的任何页面中。

Though the sample components shown here are simple Panels, but in reality there are all sorts of components, e.g. Search, Lists, Editors, Views etc...

Currently they have been done on lots of Wordpress Sites where each and every page can have totally different layouts. In the past we used Angular 1.5 where the WP developer you could just put our app tag up near the body and then any widget (we have about 30) could be placed 1 or more times in any page.

组件可以重复使用，因此通过 bootstrap[] 属性使组件成为根组件没有意义，因为您只能在页面上使用一次根组件。如我的第二个示例所示。

技巧一

这是第一次设置的屏幕截图和 Plunker。请注意，我有 4 个区域，其中我放置了 3 个组件，其中组件 1 被重用。

此示例是通过在单个根组件内布置组件来完成的，这对于我的用例来说是不切实际的，因为 Wordpress 页面将具有完全不同的布局和组合要求。.

Plunkr

技巧二

我尝试使用一种技术，其中每个小部件都作为根组件进行引导，基于这篇文章引导多个应用程序 Sprinkling Angular 2 components inside a non-angular page .

但是当我使用这种技术时，小部件的第二个实例不会加载。又名小部件 1。

Plunkr

查看引导示例

技术 2 - 有更多问题

如果你已经引导了 3 个根组件，你必须使用它们，否则 Angular 会抛出一个关于你没有使用的根组件的错误。

Plunker

技巧三

<ng-content></ng-content>的使用根组件似乎不起作用。

参见:Angular2 Root Component with ng-content

Answer 1

对于这种小部件，最好为每个小部件实例化一个 ng2 应用程序，例如 Bootstrap multiples applications .我确实在那里发布了一个可能的解决方案。

我确实实现了一个 ApplicationFactory，它创建了一个动态选择器，例如:

moduleFactory(selector: string, childModule : ModuleWithProviders) {

  @Component({
    selector, // dynamic selector
   ...
  })
  export class AppComponent implements AfterViewInit{
    constructor(resolver: ComponentFactoryResolver){}
    ngAfterViewInit() {
      // Cretate a Child components dynamic 
      // mapping from childModule::[bootstrap] components decoration
    }
 }

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule
   ],
   bootstrap: [AppComponent]
 })
 class AppModule { }

  platformBrowserDynamic()
      .bootstrapModule(AppModule, {providers: childModule.providers});
}

然后在 ngAfterViewInit 中，您可以使用 ComponentFactoryResolver

创建一个动态组件

这不是一个理想的解决方案，但它有效