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

【问题标题】：Angular 2 - Multiple components in any layout on different static pagesAngular 2 - 不同静态页面上任何布局中的多个组件
【发布时间】：2016-10-28 05:31:32
【问题描述】：

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

虽然这里显示的示例组件是简单的面板，但在现实有各种各样的组件，例如搜索，列表，编辑器、视图等...

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

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

技巧1

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

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

Plunkr

技巧2

根据这篇文章 Bootstrapping Multiple Applications Sprinkling Angular 2 components inside a non-angular page，我尝试使用将每个小部件引导为根组件的技术。

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

Plunkr

查看引导示例

技术 2 - 有更多问题

如果您已引导 3 个根组件，则必须使用所有这些组件，否则 Angular 会针对您未使用的根组件抛出错误。

Plunker

技巧3

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

见：Angular2 Root Component with ng-content

【问题讨论】：

你最后做了什么？我也有类似的要求。

标签： angular

【解决方案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 创建动态组件

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

【讨论】：

【解决方案2】：

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

【讨论】：

我已经扩展了我原来的帖子，以展示如何将组件引导到根组件，这意味着您只能使用每个组件一次。
这就是我在回答中所解释的。创建多个包装器组件仅用于包装您的实际组件。只有最外层组件的选择器很重要，您可以根据需要在每个包装器组件中重复使用另一个组件。
我真的不明白你的建议，我想知道你是否可以改变我的一个 plunkrs 来证明你的意思？但是为了您的清楚，我正在谈论的静态页面在 WordPress 中，每个页面都可以有完全不同的布局。过去我们使用 Angular 1.5，您只需将应用标签放在正文附近，然后任何小部件（我们大约有 30 个）都可以在任何页面上使用 1 次或多次。
我同意它很脏，但它可以让你继续前进，直到根本问题得到解决。您也许还可以在运行时动态创建组件以减轻痛苦，但我不确定，从未使用过这种方法stackoverflow.com/questions/34784778/…
仅供参考：刚刚发现这个技术无论如何都不能使用，因为如果你定义了多个根组件，你必须全部使用它们。它们不是可选的。我在标题为“技术 2 - 有更多问题”的原始帖子中发表了评论

【解决方案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>

【讨论】：

我不是想参数化一个简单的小部件，我已经添加了一个 not above，这解释了。 “尽管这里显示的示例组件是简单的面板，但实际上有各种各样的组件，例如搜索、列表、编辑器、视图等......”

【解决方案4】：

好的，随着你的更新，我得到了你。如果有任何方法可以使您尝试的工作，我不是用户，但我会做的是这样的： `

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

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

'' 将绑定您放在“my-app”中的 html，以便它可以工作，并且您可以根据需要为每个静态页面使用不同的内容。

【讨论】：

该技术的问题是编写“您的表格代码”的区域，在 Angular 2 解析后，HTML 完全消失了。我看过在使用指令作为潜在的解决方案，但我似乎无法让它发挥作用。
你说得对，我不知道为什么它不能在 plkr 中工作......但我正在使用它并且工作得很好，这是一个测试项目，我已经公开并且我在哪里使用 ng-content 创建模态窗口组件：bitbucket.org/albertomartineztomas/angular2_test/src/…
我发现它为什么不起作用，不能用于根组件，我在原始问题中列出了一个链接