angular 2 包含 html 模板

Posted 2023-02-22

【中文标题】angular 2 包含 html 模板

【英文标题】：angular 2 include html templates

【发布时间】：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,... 但是如何在主模板中包含其他模板？

这有帮助吗？ ***.com/questions/12863663/…

@natel 你的链接是关于 angular1-routing...不是我想要的

ng-include 不在 angular2 的范围内。你应该使用 CFR。

【参考方案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 将是