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

创建一个组件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.

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

4. 在 import 语句之后，添加一个 @Component 装饰器。

   After the import statement, add a @Component decorator.

         
           content_copy
         
         @Component({
   })
       

5. 为组件选择一个 CSS 选择器。

   Choose a CSS selector for the component.

         
           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.

         
           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.

         
           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.

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