何时使用angular组件

当应用程序基于基于组件的架构并且用户界面被划分为较小的 Web 组件时，应该使用 Angular 组件，其中每个组件提供不同的功能。

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

使用@angular/cli 创建组件

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

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

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

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

<div>zipcode works!</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;
        }

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 go here中定义的内联 HTML 模板。
• styleUrls ：一个或者多个文件的 URL，这些文件包含仅针对此组件的 CSS 样式表。
• 样式 : 一个或者多个内联 CSS 样式表，特定于该组件。

如何导入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 生成的，那么它将自动进行上面突出显示的更改，否则我们必须手动进行。

如何创建Angular组件

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

什么是 angular 中的组件

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

手动创建组件

我们可以根据我们的要求手动创建上述文件，但要创建一个组件，我们只需要在文件夹 zipcode 中定义强制文件“zipcode.component.ts”。