Angular 组件

1. 什么是 Angular 组件
2. 何时使用 Angular 组件
3. 如何创建 Angular 组件
- 3.1 使用@angular/cli创建组件
- 3.2 手动创建组件
4. 如何导入 Angular 组件
5. Angular 组件元数据

原文： https://howtodoinjava.com/angular/angular-component/

在本 Angular2 组件教程中，学习 Angular 中的组件是什么，如何创建 Angular 组件，Angular 组件元数据的示例。

1. 什么是 Angular 组件

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

2. 何时使用 Angular 组件

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

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

3. 如何创建 Angular 组件

我们可以使用 angular CLI（命令行界面）或手动创建 Angular 组件。

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

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

// command: ng generate component [name]
$ ng generate component zipcode

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

zipcode.component.html：此 html 文件包含与组件关联的代码/模板，例如：
```
<div><strong>zipcode works!</strong></div>
```

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

      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：包含支持视图功能的逻辑的组件类。

      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 文件包含与组件关联的样式表，例如：

   /* 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 来加载组件，如下所示：

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装饰器将紧随其后的类标识为组件类。

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

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