javascript - 将html模板包含到Angular 6的另一个模板中

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

我怎样才能做到这一点？

非常感谢。

最佳答案

假设您有以下html:

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

并将此代码放入AppComponent中。您可以将这两个div分为两个部分:

组件

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

)}
export class ComponentA {

}

ComponentA.html

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

ComponentB.ts

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

)}
export class ComponentB {

}

ComponentB.html

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

然后进入你的AppComponent.html:

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