angular 2 包含 html 模板答案

【问题标题】：angular 2 include html templatesangular 2 包含 html 模板
【发布时间】：2017-03-12 00:15:47
【问题描述】：

在角度 2 中，我需要创建一个带有冗余部分的大型 html 模板。因此，我想创建多个 html 模板并将它们放在一起，方法是将它们包含在主 html 文件中（如 angular1 中的 ng-include）

但是如何在主模板中包含子模板？

示例：

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>

【问题讨论】：

它没有任何角度上下文吗？或者只是div 和static text？
确实如此。我有 {{}} 和 *ngIf, ngFor,... 但是如何在主模板中包含其他模板？
这有帮助吗？ stackoverflow.com/questions/12863663/…
@natel 你的链接是关于 angular1-routing...不是我想要的
ng-include 不在 angular2 的范围内。你应该使用 CFR。

标签： html angular

【解决方案1】：

首先让我告诉你，来自 Angular1.x 的 ng-include 不受 Angular2 支持，所以显然 $Compile 是Angular2 中不存在。因此，您可以继续使用 CRF-ComponentFactoryResolver，如此处所示，以使用角度上下文动态添加 HTML。

DEMO--(CFR) : https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

如果您的 HTML 片段有角度上下文，您应该使用 CFR-ComponentFactoryResolver。

就像在 sub1.html 中一样，您有 button，您可能想要点击它并触发它的点击事件。这可以通过 CFR 来实现，如下所示，

您可以通过 CRF 做很多事情。这可能是最简单的例子。

@Component({
  selector: 'my-app',
  template: `

     <button (click)="addComponents()">Add HTML (dynamically using CRF)</button>

     <h1>Angular2 AppComponent</h1>
     <hr>

     <div>
     <h5>sub1.html goes here</h5>
      <div class="container">
        <template #subContainer1></template>
      </div>
     </div>

     <hr>
     <h5>sub2.html goes here</h5>
     <div class="container">
        <template #subContainer2></template>
     </div>
  `,

})
export class App {
    name:string;
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
    @ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
    constructor(
      private compFactoryResolver: ComponentFactoryResolver
      ) {
      this.name = 'Angular2'
    }

    addComponents() {

      let compFactory: ComponentFactory;

      compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
      this.subContainer1.createComponent(compFactory);


      compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
      this.subContainer2.createComponent(compFactory);
    }
  }
}

【讨论】：

ComponentFactoryResolver 不再在核心 API 中。
在一个例子中使用内置类，没有显示对应的导入行，真的很糟糕

【解决方案2】：

您可以创建 sub1 sub2 等组件。然后在这些子组件上添加这些 html 文件作为模板。

在主 html 上分别调用组件选择器。它会工作

【讨论】：

谢谢。我想我会这样做...想绕过为每个模板创建组件...但是谢谢:)
好吧，如果您在此处 ping 遇到任何问题。
@user2638975: test.html 将是