Angular 組件-概覽

Angular Components 概述

組件是 Angular 應用的主要構造塊。每個組件包括如下部分：

• 一個 HTML 模板，用于聲明頁面要渲染的內容
• 一個用于定義行為的 Typescript 類
• 一個 CSS 選擇器，用于定義組件在模板中的使用方式
• （可選）要應用在模板上的 CSS 樣式

本主題描述如何創(chuàng)建和配置 Angular 組件。

要查看或下載本主題中使用的范例代碼，請參閱 現(xiàn)場演練 / 下載范例。

先決條件

要創(chuàng)建一個組件，請先驗證你是否滿足以下先決條件：

1. 安裝 Angular CLI。
2. 創(chuàng)建一個帶有初始項目的 Angular 工作區(qū)。如果還沒有項目，你可以用 ?ng new <project-name>? 創(chuàng)建一個，其中 ?<project-name>? 是你的 Angular 應用的名字。

創(chuàng)建一個組件

Angular CLI 是用來創(chuàng)建組件的最簡途徑。你也可以手動創(chuàng)建一個組件。

使用 Angular CLI 創(chuàng)建組件

使用 Angular CLI 創(chuàng)建一個組件：

1. 在終端窗口中，導航到要放置你應用的目錄。
2. 運行 ?ng generate component <component-name>? 命令，其中 ?<component-name>? 是新組件的名字。

默認情況下，該命令會創(chuàng)建以下內容：

• 一個以該組件命名的文件夾
• 一個組件文件 ?<component-name>.component.ts ?
• 一個模板文件 ?<component-name>.component.html ?
• 一個 CSS 文件， ?<component-name>.component.css ?
• 測試文件 ?<component-name>.component.spec.ts ?

其中 ?<component-name>? 是組件的名稱。

你可以更改 ?ng generate component? 創(chuàng)建新組件的方式。

手動創(chuàng)建組件

雖然 Angular CLI 是創(chuàng)建 Angular 組件的最佳途徑，但你也可以手動創(chuàng)建一個組件。本節(jié)將介紹如何在現(xiàn)有的 Angular 項目中創(chuàng)建核心組件文件。

要手動創(chuàng)建一個新組件：

1. 導航到你的 Angular 項目目錄。
2. 創(chuàng)建一個新文件 ?<component-name>.component.ts? 。
3. 在文件的頂部，添加下面的 import 語句。

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

4. 在 ?import ?語句之后，添加一個 ?@Component? 裝飾器。

@Component({
})

5. 為組件選擇一個 CSS 選擇器。

@Component({
  selector: 'app-component-overview',
})

6. 定義組件用以顯示信息的 HTML 模板。在大多數(shù)情況下，這個模板是一個單獨的 HTML 文件。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

7. 為組件的模板選擇樣式。在大多數(shù)情況下，你可以在單獨的文件中定義組件模板的樣式。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

8. 添加一個包含該組件代碼 ?class ?語句。

export class ComponentOverviewComponent {

}

指定組件的 CSS 選擇器

每個組件都需要一個 CSS 選擇器。選擇器會告訴 Angular：當在模板 HTML 中找到相應的標簽時，就把該組件實例化在那里。例如，考慮一個組件 ?hello-world.component.ts? ，它的選擇器定義為 ?app-hello-world? 。 當 ?<app-hello-world>? 出現(xiàn)在模板中時，這個選擇器就會讓 Angular 實例化該組件。

在 ?@Component? 裝飾器中添加一個 ?selector ?語句來指定組件的選擇器。

@Component({
  selector: 'app-component-overview',
})

定義一個組件的模板

模板是一段 HTML，它告訴 Angular 如何在應用中渲染組件?？梢酝ㄟ^以下兩種方式之一為組件定義模板：引用外部文件，或直接寫在組件內部。

要把模板定義為外部文件，就要把 ?templateUrl ?添加到 ?@Component? 裝飾器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

要在組件中定義模板，就要把一個 ?template ?屬性添加到 ?@Component? 中，該屬性的內容是要使用的 HTML。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})

如果你想讓模板跨越多行，可以使用反引號（ ?`? ）。例如：

@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})

Angular 組件需要一個用 ?template ?或 ?templateUrl ?定義的模板。但你不能在組件中同時擁有這兩個語句。

聲明組件的樣式

有兩種方式可以為組件的模板聲明樣式：引用一個外部文件，或直接寫在組件內部。

要在單獨的文件中聲明組件的樣式，就要把 ?styleUrls ?屬性添加到 ?@Component? 裝飾器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

要想在組件內部聲明樣式，就要把 ?styles ?屬性添加到 ?@Component?，該屬性的內容是你要用的樣式。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

?styles ?屬性接受一個包含 CSS 規(guī)則的字符串數(shù)組。