# Angular 组件

> 原文： [https://howtodoinjava.com/angular/angular-component/](https://howtodoinjava.com/angular/angular-component/)

在本 **Angular2 组件教程**中，学习 [Angular](https://howtodoinjava.com/angular/dev-workspace-setup/) 中的组件是什么，如何创建 Angular 组件，Angular 组件元数据的示例。

## 1\. 什么是 Angular 组件

Angular 组件控制屏幕的称为*视图*的部分。 支持视图中各种功能（例如**数据绑定**，**事件绑定**等）的应用逻辑被编写在一个类文件中，该文件通常被称为“`app.component.ts`”。

## 2\. 何时使用 Angular 组件

当应用基于**基于组件的架构**且用户界面分为较小的 Web 组件（每个组件提供不同的功能）时，应使用 Angular 组件。

例如，一个网站可能有一个组件用于捕获反馈，而另一个则用于社交媒体跟踪。

## 3\. 如何创建 Angular 组件

我们可以使用 [angular CLI](https://github.com/angular/angular-cli/blob/master/packages/angular/cli/README.md)（命令行界面）或手动创建 Angular 组件。

#### 3.1 使用`@angular/cli`创建组件

可以使用以下命令，使用`@angular/cli`创建新的 Angular 组件（例如“邮政编码”）组件：

```java
// command: ng generate component [name]

$ ng generate component zipcode

```

上面的命令将在`src`下名为`zipcode`的新文件夹中创建以下文件：

*   **`zipcode.component.html`**：此 html 文件包含与组件关联的代码/模板，例如：

    ```java
    <div><strong>zipcode works!</strong></div>

    ```

*   **`zipcode.component.spec.ts`** ：此文件包含与单元测试相关的代码，例如：

    ```java
            import { async, ComponentFixture, TestBed } from '@angular/core/testing';

            import { ZipcodeComponent } from './zipcode.component';

            describe('ZipcodeComponent', () => {
            let component: ZipcodeComponent;
            let fixture: ComponentFixture<ZipcodeComponent>;

            beforeEach(async(() => {
                TestBed.configureTestingModule({
                declarations: [ ZipcodeComponent ]
                })
                .compileComponents();
            }));

            beforeEach(() => {
                fixture = TestBed.createComponent(ZipcodeComponent);
                component = fixture.componentInstance;
                fixture.detectChanges();
            });

            it('should create', () => {
                expect(component).toBeTruthy();
            });
            });

    ```

*   **`zipcode.component.ts`**：包含支持视图功能的逻辑的组件类。

    ```java
            import { Component, OnInit } from '@angular/core';

            @Component({
            selector: 'app-zipcode',
            templateUrl: './zipcode.component.html',
            styleUrls: ['./zipcode.component.css']
            })
            export class ZipcodeComponent implements OnInit {

            constructor() { }

            ngOnInit() {
            }

            }

    ```

*   **`zipcode.component.css`**：CSS 文件包含与组件关联的样式表，例如：

    ```java
         /* ZipcodeComponent's private CSS styles */
            h1 {
            font-size: 1.2em;
            color: #999;
            margin-bottom: 0;
            }
            h2 {
            font-size: 2em;
            margin-top: 0;
            padding-top: 0;
            }

    ```

#### 3.2 手动创建组件

我们可以根据需要手动创建上述文件，但是要创建组件，我们只需要在文件夹`zipcode`内定义必需文件`zipcode.component.ts`。

## 4\. 如何导入 Angular 组件

创建完组件后，我们需要通过将其导入文件“`app.module.ts`”中来告知 angular 来加载组件，如下所示：

```java
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MessagesComponent } from './messages/messages.component';
import { ZipcodeComponent } from './zipcode/zipcode.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,

    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    )
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    HeroSearchComponent,
    ZipcodeComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

> 如果使用`@angular/cli`命令`ng generate component zipcode`来生成组件，则它将自动进行上述突出显示的更改，否则我们必须手动进行。

## 5\. Angular 组件元数据

组件*元数据*是指在`@Component`装饰器中定义的**属性**。 `@Component`装饰器将紧随其后的类标识为组件类。

*元数据*直接通过内联代码或通过引用将模板与组件关联。 组件及其模板一起描述了*视图*。

```java
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-zipcode',
  templateUrl: './zipcode.component.html',
  styleUrls: ['./zipcode.component.css']
})
export class ZipcodeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

```

以下是*元数据*中定义的最常用的属性：

*   **`selector`**：CSS 选择器可帮助 Angular 在模板 HTML 中找到的相应标记的位置创建并插入组件的实例。
*   **`templateUrl`** ：组件的 HTML 模板的模块相对地址。
*   **`template`**：在`//html stuff goes here`中定义的内联 HTML 模板。
*   **`styleUrls`** ：一个或多个 URL，用于包含 CSS 样式表的文件，仅特定于此组件。
*   **`style`**：特定于此组件的一个或多个*内联 CSS 样式表*。

学习愉快！

阅读更多： [Angular Docs](https://angular.io/guide/architecture-components)