angular 2包含html模板

Question

在angular 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>

Answer 1

首先让我告诉你，从Angular1中包含ng。Angular2不支持x，因此显然，Angular2中不存在$Compile。因此，您可以继续使用CRF ComponentFactoryResolver，如图所示，使用角度上下文动态添加HTML。

演示--（CFR）：https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

如果超文本标记语言有角上下文，则应使用CFR-ComponentFactoryResolver。

在sub1.html中，您有按钮，您可能想要单击它并触发其单击事件。这可以通过如下所示的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);
    }
  }
}

Answer 2

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

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