Angular Components 概述
Angular Components Overview
元件是 Angular 應用的主要構成要素。每個元件包括如下部分:
Components are the main building block for Angular applications. Each component consists of:
一個 HTML 範本,用於宣告頁面要渲染的內容
An HTML template that declares what renders on the page
一個用於定義行為的 Typescript 類別
A Typescript class that defines behavior
一個 CSS 選擇器,用於定義元件在範本中的使用方式
A CSS selector that defines how the component is used in a template
(可選)要應用在範本上的 CSS 樣式
Optionally, CSS styles applied to the template
本主題描述如何建立和配置 Angular 元件。
This topic describes how to create and configure an Angular component.
要檢視或下載本主題中使用的範例程式碼,請參閱
To view or download the example code used in this topic, see the
先決條件
Prerequisites
要建立一個元件,請先驗證你是否滿足以下先決條件:
To create a component, verify that you have met the following prerequisites:
安裝 Angular CLI。
Install the Angular CLI.
建立一個 Angular 專案。如果你沒有專案,你可以用
ng new <project-name>
建立一個專案,其中<project-name>
是你的 Angular 應用的名字。Create an Angular project. If you don't have a project, you can create one using
ng new <project-name>
, where<project-name>
is the name of your Angular application.
建立一個元件
Creating a component
Angular CLI 是用來建立元件的最簡途徑。你也可以手動建立一個元件。
The easiest way to create a component is with the Angular CLI. You can also create a component manually.
使用 Angular CLI 建立元件
Creating a component using the Angular CLI
使用 Angular CLI 建立一個元件:
To create a component using the Angular CLI:
在終端視窗中,導航到要放置你應用的目錄。
From a terminal window, navigate to the directory containing your application.
執行
ng generate component <component-name>
命令,其中<component-name>
是新元件的名字。Run the
ng generate component <component-name>
command, where<component-name>
is the name of your new component.
預設情況下,該命令會建立以下內容:
By default, this command creates the following:
一個以該元件命名的資料夾
A folder named after the component
一個元件檔案
<component-name>.component.ts
A component file,
<component-name>.component.ts
一個範本檔案
<component-name>.component.html
A template file,
<component-name>.component.html
一個 CSS 檔案,
<component-name>.component.css
A CSS file,
<component-name>.component.css
測試檔案
<component-name>.component.spec.ts
A testing specification file,
<component-name>.component.spec.ts
其中 <component-name>
是元件的名稱。
Where <component-name>
is the name of your component.
你可以更改 ng generate component
建立新元件的方式。欲知詳情,請參閱 Angular CLI 文件中的 ng generate component。
You can change how ng generate component
creates new components. For more information, see ng generate component in the Angular CLI documentation.
手動建立元件
Creating a component manually
雖然 Angular CLI 是建立 Angular 元件的最簡途徑,但你也可以手動建立一個元件。本節將介紹如何在現有的 Angular 專案中建立核心元件檔案。
Although the Angular CLI is the easiest way to create an Angular component, you can also create a component manually. This section describes how to create the core component file within an existing Angular project.
要手動建立一個新元件:
To create a new component manually:
導航到你的 Angular 專案目錄。
Navigate to your Angular project directory.
建立一個新檔案
<component-name>.component.ts
。Create a new file,
<component-name>.component.ts
.在檔案的頂部,新增下面的 import 語句。
At the top of the file, add the following import statement.
import { Component } from '@angular/core';
在
import
語句之後,新增一個@Component
裝飾器。After the
import
statement, add a@Component
decorator.@Component({ })
為元件選擇一個 CSS 選擇器。
Choose a CSS selector for the component.
@Component({ selector: 'app-component-overview', })
關於選擇選擇器的更多資訊,參閱指定元件的選擇器。
For more information on choosing a selector, see Specifying a component's selector.
定義元件用以顯示資訊的 HTML 範本。在大多數情況下,這個範本是一個單獨的 HTML 檔案。
Define the HTML template that the component uses to display information. In most cases, this template is a separate HTML file.
@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', })
關於定義元件範本的更多資訊,請參閱定義元件的範本。
For more information on defining a component's template, see Defining a component's template.
為元件的範本選擇樣式。在大多數情況下,你可以在單獨的檔案中定義元件範本的樣式。
Select the styles for the component's template. In most cases, you define the styles for your component's template in a separate file.
@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', styleUrls: ['./component-overview.component.css'] })
新增一個包含該元件程式碼
class
語句。Add a
class
statement that includes the code for the component.export class ComponentOverviewComponent { }
指定元件的 CSS 選擇器
Specifying a component's CSS selector
每個元件都需要一個 CSS 選擇器。選擇器會告訴 Angular:當在範本 HTML 中找到相應的標籤時,就把該元件實例化在那裡。例如,考慮一個元件 hello-world.component.ts
,它的選擇器定義為 app-hello-world
。 當 <app-hello-world>
出現在範本中時,這個選擇器就會讓 Angular 實例化該元件。
Every component requires a CSS selector. A selector instructs Angular to instantiate this component wherever it finds the corresponding tag in template HTML. For example, consider a component hello-world.component.ts
that defines its selector as app-hello-world
. This selector instructs Angular to instantiate this component any time the tag <app-hello-world>
appears in a template.
在 @Component
裝飾器中新增一個 selector
語句來指定元件的選擇器。
Specify a component's selector by adding a selector
statement to the @Component
decorator.
@Component({
selector: 'app-component-overview',
})
定義一個元件的範本
Defining a component's template
範本是一段 HTML,它告訴 Angular 如何在應用中渲染元件。你可以透過以下兩種方式之一為元件定義範本:參考外部檔案,或直接寫在元件內部。
A template is a block of HTML that tells Angular how to render the component in your application. You can define a template for your component in one of two ways: by referencing an external file, or directly within the component.
要把範本定義為外部檔案,就要把 templateUrl
新增到 @Component
裝飾器中。
To define a template as an external file, add a templateUrl
property to the @Component
decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
要在元件中定義範本,就要把一個 template
屬性新增到 @Component
中,該屬性的內容是要使用的 HTML。
To define a template within the component, add a template
property to the @Component
decorator that contains the HTML you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})
如果你想讓你的範本跨越多行,你可以使用反引號( `
)。例如:
If you want your template to span multiple lines, you can use backticks ( `
). For example:
@Component({
selector: 'app-component-overview',
template: `<h1>Hello World!</h1>
<p>This template definition spans
multiple lines.</p>`
})
Angular 元件需要一個用 template
或 templateUrl
定義的範本。但你不能在元件中同時擁有這兩個語句。
An Angular component requires a template defined using template
or templateUrl
. You cannot have both statements in a component.
宣告元件的樣式
Declaring a component's styles
你有以下兩種方式來為元件的範本宣告樣式:參考一個外部檔案,或直接寫在元件內部。
You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.
要在單獨的檔案中宣告元件的樣式,就要把 styleUrls
屬性新增到 @Component
裝飾器中。
To declare the styles for a component in a separate file, add a styleUrls
property to the @Component
decorator.
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
要想在元件內部宣告樣式,就要把 styles
屬性新增到 @Component
,該屬性的內容是你要用的樣式。
To select the styles within the component, add a styles
property to the @Component
decorator that contains the styles you want to use.
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})
styles
屬性接受一個包含 CSS 規則的字串陣列。
The styles
property takes an array of strings that contain the CSS rule declarations.
下一步
Next steps
關於元件的體系結構概述,請參閱元件和範本簡介。
For an architectural overview of components, see Introduction to components and templates.
關於建立元件時可以使用的其他選項,請參閱“API 參考手冊”中的“元件”。
For additional options you can use when creating a component, see Component in the API Reference.
要了解關於為元件指定樣式的更多資訊,請參閱元件樣式。
For more information on styling components, see Component styles.
關於範本的詳細資訊,請參閱範本語法。
For more information on templates, see Template syntax.