Question

我有一堆静态页面，它们使用各种组件放置在HTML设计者喜欢的任何地方。例如在WordPress网站的任何页面内。

虽然此处显示的示例组件是简单的面板，但是在   现实中存在各种各样的组件，例如搜索，列表，   编辑，观点等...

目前，他们已经在很多Wordpress网站上完成了   每个页面都可以有完全不同的布局。过去我们用过   Angular 1.5，WP开发人员可以将我们的app标签放在身体附近，然后任何小部件（我们大约30个）都可以在任何页面中放置一次或多次。

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

技术1

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

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

Plunkr

技术2

我尝试使用一种技术，根据这篇文章引导多个应用程序 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

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

创建动态组件

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

Answer 2

您可以使用不同的选择器创建一堆包装器组件，每个包装器包装相同的组件，然后引导这些包装器组件。

Answer 3

你能更好地解释一下你想要达到的目标吗？我不明白你...... 你不需要创建4个不同的组件来做你正在做的事情，你可以这样做：

https://plnkr.co/pvvlD7O2gXZBjVkY16po?p=preview

<table>
   <tr>
      <td>
          <h2>Area 1</h2>
          <my-widget></my-widget>
      </td>
      <td>
          <h2>Area 2</h2>
          <my-widget [title]="'custom title'"></my-widget>
      </td>
    </tr>
   <tr>
      <td>
          <h2>Area 3</h2>
          <my-widget [background]="'yellow'"></my-widget>
      </td>
      <td>
          <h2>Area 4</h2>
          <my-widget [title]="'Last one'" [background]="'blue'"></my-widget>
      </td>
    </tr>
  </table>

Answer 4

好的，随着你的更新我得到了你。我不是用户，如果有任何方法让你的工作成为你正在尝试的东西，但我所做的是这样的： `

<body>
  <my-app>
    your table code
    </my-app>
  </body>

` 然后让你成为根元素＆＃39; my-app＆＃39;模板看起来像这样：＆＃39;＆＃39;

＆＃39;＆＃39;将绑定您放入的html＆＃39; my-app＆＃39;所以它可以工作，你可以根据需要为每个静态页面使用不同的内容。

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

4 个答案: