填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写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 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:

  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';
          
          import { Component } from '@angular/core';
        
  4. import 语句之后,添加一个 @Component 装饰器。

    After the import statement, add a @Component decorator.

    @Component({ })
          
          @Component({
    })
        
  5. 为组件选择一个 CSS 选择器。

    Choose a CSS selector for the component.

    @Component({ selector: 'app-component-overview', })
          
          @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', })
          
          @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'] })
          
          @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 { }
          
          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', })
      
      @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', })
      
      @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>', })
      
      @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>` })
      
      @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'] })
      
      @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; }'] })
      
      @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