将htm模板包含到Angular 6的另一个模板中

Question

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

我怎样才能做到这一点？

非常感谢。

Answer 1

假设您有以下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>