在 Angular 6 上将 html 模板包含到另一个模板中答案

【问题标题】：Include htm template into another one on Angular 6在 Angular 6 上将 html 模板包含到另一个模板中
【发布时间】：2019-04-09 15:13:55
【问题描述】：

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

我该怎么做？

非常感谢。

【问题讨论】：

我建议您阅读有关组件的内容：angular.io/guide/architecture-components

标签： javascript html angular typescript include

【解决方案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 {

}

组件A.html

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

ComponentB.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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

除了上面的答案，别忘了包括

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

在您的两个组件 ts 文件中。

【讨论】：

使用ng generate component exampleComponent生成组件时默认包含它
是的，但是如果你手动创建它，你必须自己添加它。