时间戳

首页 > 解决方案 > 在 Angular 6 上将 htm 模板包含到另一个模板中

javascript - 在 Angular 6 上将 htm 模板包含到另一个模板中

问题描述

实际上，我有一个包含所有代码的 HTML 文件。我想将这个拆分为多个文件并包含它们。

我怎样才能做到这一点？

非常感谢。

标签： javascripthtmlangulartypescriptinclude

解决方案

假设你有这个 html：

<div class="componentA">ComponentA</div>
<div class="componentB">ComponentB</div>

这段代码在`AppComponent. 您可以将这两个 div 拆分为两个组件：

组件A.ts

@Component({
  selector: 'componentA',
  templateUrl: 'componentA.component.html',
  styleUrls: ['componentA.component.scss'],

)}
export class ComponentA {

}

组件A.html

<div class="componentA">ComponentA</div>

组件B.ts

@Component({
  selector: 'componentB',
  templateUrl: 'componentB.component.html',
  styleUrls: ['componentB.component.scss'],

)}
export class ComponentB {

}

组件B.html

<div class="componentB">ComponentB</div>

然后进入你的AppComponent.html：

<componentA></componentA>
<componentB></componentB>

推荐阅读