填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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:

  1. 安裝 Angular CLI

    Install the Angular CLI.

  2. 建立一個帶有初始專案的 Angular 工作區。如果還沒有專案,你可以用 ng new <project-name> 建立一個,其中 <project-name> 是你的 Angular 應用的名字。

    Create an Angular workspace with initial application. 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:

  1. 在終端視窗中,導航到要放置你應用的目錄。

    From a terminal window, navigate to the directory containing your application.

  2. 執行 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:

  1. 導航到你的 Angular 專案目錄。

    Navigate to your Angular project directory.

  2. 建立一個新檔案 <component-name>.component.ts

    Create a new file, <component-name>.component.ts.

  3. 在檔案的頂部,新增下面的 import 語句。

    At the top of the file, add the following import statement.

          
          import { Component } from '@angular/core';
        
  4. import 語句之後,新增一個 @Component 裝飾器。

    After the import statement, add a @Component decorator.

          
          @Component({
    })
        
  5. 為元件選擇一個 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.

  6. 定義元件用以顯示資訊的 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.

  7. 為元件的範本選擇樣式。在大多數情況下,你可以在單獨的檔案中定義元件範本的樣式。

    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']
    })
        
  8. 新增一個包含該元件程式碼 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 元件需要一個用 templatetemplateUrl 定義的範本。但你不能在元件中同時擁有這兩個語句。

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 declare 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

最後複查時間: 3/18/2021