DoubleRight The past of the world Blog's

Angular 组件

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

搜索