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)