1.什么是Angular模板和视图

模板是一个 HTML 片段，它告诉 Angular 如何在 Angular 应用程序中呈现组件。

模板立即与定义该组件视图的组件相关联。

2.1. 查看层次结构示例

下图显示了管理超级英雄和危机中心的应用程序的视图层次结构。

• App 组件位于根级别，被称为包含 Heroes 和 Crisis Center 组件的主机视图。
• Heroes 组件充当其子组件 Hero List 和 Hero Details 的宿主视图，它们将具有各自的视图。
• 同样，Crisis Center Component 进一步托管了两个子组件，分别包含 Crisis List 和 Crisis Details 组件的视图

这里层次结构中的每个组件都可能有一个与之关联的视图。

3.2. 模板文件

模板在单独的 HTML 文件中定义，并使用 @Component 装饰器的 templateUrl 属性链接到组件元数据，例如

<p>
  zipcode separate HTML template
</p>

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-zipcode',
  templateUrl: './zipcode.component.html',
  styleUrls: ['./zipcode.component.css']
})
export class ZipcodeComponent implements OnInit 
{
  constructor() { }
  ngOnInit() {
  }
}

3.1. 内联模板

内联模板是通过将 HTML 代码放在反引号中来定义的，并使用@Component 装饰器的模板属性链接到组件元数据，例如

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-zipcode',
  template: `
            <p>
            zipcode inline template
            </p>
            `,
  styleUrls: ['./zipcode.component.css']
})
export class ZipcodeComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

要使用 @angular/cli 定义内联模板，请使用以下命令：

ng generate component zipcode -it

2. Angular 视图层次结构

该组件还可以包含一个视图层次结构，它具有嵌入的视图，定义或者与其他组件相关联。

视图层次结构可以包含来自同一 NgModule 中组件的视图，但它也可以包含来自不同 NgModule 中定义的组件的视图。

关于视图层次结构的要点如下：

• 它是可以作为一个独立单元的相关视图树。
• 根视图通常称为组件的宿主视图。
• 它在 Angular 变化检测中扮演着重要的角色。

3. 模板类型

在 angular 组件中有两种定义模板的方法。