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

我有一堆静态页面,使用各种组件放在 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 []属性创建组件根组件没有意义,因为您只能在页面上使用一次根组件.如我的第二个例子所示.

技术1

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

这个例子是通过在单个根组件中布置组件来完成的,这对于我的wordpress Pages具有完全不同的布局和组合要求的用例是不切实际的.
.

Plunkr

技术2

我尝试使用一种技术,其中每个窗口小部件都作为根组件进行自举,基于这篇文章Bootstrapping Multiple Applications Sprinkling Angular 2 components inside a non-angular page.

但是当我使用这种技术时,小部件的第二个实例不会加载. AKA小工具1.

Plunkr

请参阅bootstrapping示例

技术2 – 还有其他问题

如果你有自举的3个根组件,你必须使用它们全部,否则Angular会抛出你没有使用的根组件的错误.

Plunker

技术3

< ng-content>< / ng-content>的使用似乎没有工作根组件.

见：Angular2 Root Component with ng-content

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

我实现了一个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创建动态组件

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