Angular 组件 · HowToDoInJava 中文系列教程

# 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)