Angular Components 概述link

Angular Components Overviewlink

元件是 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.

先決條件link

Prerequisiteslink

要建立一個元件，請先驗證你是否滿足以下先決條件：

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

建立一個元件link

Creating a componentlink

Angular CLI 是用來建立元件的最簡途徑。你也可以手動建立一個元件。

The easiest way to create a component is with the Angular CLI. You can also create a component manually.

使用 Angular CLI 建立元件link

Creating a component using the Angular CLIlink

使用 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.

手動建立元件link

Creating a component manuallylink

雖然 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';

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

4. 在 import 語句之後，新增一個 @Component 裝飾器。

   After the import statement, add a @Component decorator.

   @Component({ })

         
           content_copy
         
         @Component({
   })
       

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

   Choose a CSS selector for the component.

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

         
           content_copy
         
         @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', })

         
           content_copy
         
         @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'] })

         
           content_copy
         
         @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 { }

         
           content_copy
         
         export class ComponentOverviewComponent {
   
   }
       

指定元件的 CSS 選擇器link

Specifying a component's CSS selectorlink

每個元件都需要一個 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.

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

定義一個元件的範本link

Defining a component's templatelink

範本是一段 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.

      
        content_copy
      
      @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.

      
        content_copy
      
      @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:

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

宣告元件的樣式link

Declaring a component's styleslink

你有以下兩種方式來為元件的範本宣告樣式：參考一個外部檔案，或直接寫在元件內部。

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.

      
        content_copy
      
      @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.

      
        content_copy
      
      @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.

下一步link

Next stepslink

• 關於元件的體系結構概述，請參閱元件和範本簡介。

  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.