首页 文章

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

提问于
浏览 次
8

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

虽然这里显示的样本组件是简单的面板，但实际上有各种各样的组件，例如搜索，列表，编辑器，视图等...目前，他们已经在许多Wordpress网站上完成，其中每个页面都可以有完全不同的布局 . 在过去，我们使用Angular 1.5，WP开发人员可以将我们的app标签放在身体附近，然后任何小部件（我们大约30个）可以在任何页面中放置1次或更多次 .

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

Technique 1

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

This Example is done by laying out the components inside a single root component ，这对于我的用例来说是不切实际的，其中Wordpress Pages将具有完全不同的布局和组合要求 . .

Plunkr

enter image description here

Technique 2

我尝试使用一种技术，其中每个小部件作为根组件被引导，基于此帖子 Bootstrapping Multiple Applications Sprinkling Angular 2 components inside a non-angular page .

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

Plunkr

See example with bootstrapping

enter image description here

Technique 2 - Has further problems

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

Plunker

enter image description here

Technique 3

<ng-content></ng-content> 的使用似乎不适用于根组件 .

见：Angular2 Root Component with ng-content

angular

4 回答

  • 0

    对于这种小部件，最好是为每个小部件实例化一个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 创建动态组件

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

    回复于
  • 0

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

    回复于
  • 1

    你能更好地解释一下你想要实现的目标吗？我不明白你...你不需要创建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>
    回复于
  • 0

    好的，随着你的更新我得到了你 . 我不是用户，如果有任何方法可以让你正在努力工作，但我会做的是这样的事情：

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

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

    ''将绑定你放在'my-app'里面的html，这样就可以了，你可以根据需要为每个静态页面使用不同的内容 .

    回复于

相关问题