# Angular 模板和視圖 > 原文： [https://howtodoinjava.com/angular/angular-templates-and-views/](https://howtodoinjava.com/angular/angular-templates-and-views/) ## 1\. 什么是 Angular 模板和視圖 ***模板***是 **HTML 代碼段**，它告訴 Angular 如何在 angular 應用中渲染組件。 模板立即與組件相關聯，以定義該組件的***視圖***。 [](https://howtodoinjava.com/wp-content/uploads/2018/11/template-and-views.png) ## 2\. Angular 視圖層次結構 該組件還可以包含**視圖層次結構**，這些層次結構具有嵌入的視圖，這些視圖定義或與其他組件相關聯。 [](https://howtodoinjava.com/wp-content/uploads/2018/11/view-hierarchy.png) 視圖層次結構可以包含來自同一 Ng 模塊中組件的視圖，但是它也可以包含來自不同 Ng 模塊中定義的組件的視圖。 關于***視圖層次結構***的要點如下： * 它是相關視圖的樹，可以充當一個獨立的單元。 * 根視圖通常稱為*組件的宿主視圖*。 * 它在 Angular 變化檢測中起著重要作用。 #### 2.1 查看層次結構示例 下圖顯示了管理超級英雄和危機中心的應用的視圖層次結構。  * **應用組件**位于根級別，稱為*主機視圖*，其中包含**英雄**和**危機中心**組件。 * **英雄組件**充當其子組件**英雄列表**和**英雄詳細信息**的宿主視圖，它們將具有各自的視圖。 * 同樣，**危機中心組件**還托管兩個子組件，分別包含針對**危機列表**和**危機詳細信息**組件的視圖。 在此，層次結構中的每個組件都可以具有與其關聯的視圖。 ## 3\. 模板類型 有兩種方法可以在 Angular 組件中定義模板。 #### 3.1 內聯模板 內聯模板是通過將 HTML 代碼放在“反引號”中定義的，并使用`@Component`裝飾器的*模板*屬性鏈接到組件元數據。 ```java 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`定義內聯模板，請使用以下命令： ```java ng generate component zipcode -it ``` #### 3.2 模板文件 模板是在單獨的 HTML 文件中定義的，并使用`@Component`裝飾器的`templateUrl`屬性鏈接到組件元數據，例如： ```java <p> zipcode separate HTML template </p> ``` ```java 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() { } } ``` 學習愉快！