Angular 組件-概覽

Angular Components 概述

組件是 Angular 應(yīng)用的主要構(gòu)造塊。每個(gè)組件包括如下部分：

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

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

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

先決條件

要?jiǎng)?chuàng)建一個(gè)組件，請(qǐng)先驗(yàn)證你是否滿足以下先決條件：

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

創(chuàng)建一個(gè)組件

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

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

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

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

默認(rèn)情況下，該命令會(huì)創(chuàng)建以下內(nèi)容：

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

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

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

手動(dòng)創(chuàng)建組件

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

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

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

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

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

@Component({
})

5. 為組件選擇一個(gè) CSS 選擇器。

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

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

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

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

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

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

export class ComponentOverviewComponent {

}

指定組件的 CSS 選擇器

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

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

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

定義一個(gè)組件的模板

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

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

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

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

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

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

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

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

聲明組件的樣式

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

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

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

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

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

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