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

Question

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

我该怎么做？

非常感谢。

Answer 1

假设您有这个html：

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

，此代码位于`AppComponent'中。您可以将这两个div分为两个部分：

ComponentA.ts

@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>

Answer 2

• 您需要编写第二个 Component -Angular Components
• 将此组件添加到您的 App.module.ts -Angular Modules
• 如果您有业务逻辑，也可以通过服务-Angular Services
提供

Answer 3

除了上述答案外，别忘了包括

import { Component } from '@angular/core';

您的两个组件ts文件中的

。