Angular 组件 - Angular 教程

位置：首页>文章>详情分类： Web前端 > 编程技术阅读(305) 2023-06-26 07:54:31

In this angular 2组件教程, learn what is a component in 有角度的, how to create angular components, angular component metadata with example.

1.什么是角分量

A angular component controls a part of the screen called 看法. The application logic to support various functions like 数据绑定, 事件绑定, etc. in the view is written inside a class file most commonly named as ‘应用程序组件.ts‘.

2.什么时候使用角度分量

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

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

3.如何创建角度组件

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

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

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

// command: ng generate component [name]

$ ng generate component zipcode

上述命令将在来源下名为 邮政编码 的新文件夹中创建以下文件：

邮政编码.component.html：这个html文件包含与组件相关的代码/模板，例如
邮政编码有效！

邮政编码.component.spec.ts：该文件包含单元测试相关代码，例如

从 '@angular/core/testing' 导入 { async, ComponentFixture, TestBed };

        从 './zipcode.component' 导入 { ZipcodeComponent }；

        describe('ZipcodeComponent', () => {
        让组件：ZipcodeComponent；
        让 fixture: ComponentFixture;

        beforeEach(异步(() => {
            TestBed.configureTestingModule({
            声明：[ ZipcodeComponent ]
            })
            .compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(ZipcodeComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });

        它（'应该创建'，（）=> {
            期望（组件）.toBeTruthy（）；
        });
        });

邮政编码.component.ts：包含支持视图功能的逻辑的组件类，例如

从 '@angular/core' 导入 { Component, OnInit };

        @零件（{
        选择器：'app-zipcode'，
        templateUrl: './zipcode.component.html',
        styleUrls: ['./zipcode.component.css']
        })
        导出类 ZipcodeComponent 实现 OnInit {

        构造函数（）{}

        ngOnInit() {
        }

邮政编码.component.css：包含与组件关联的样式表的 CSS 文件，例如

/* ZipcodeComponent 的私有 CSS 样式 */
        h1 {
        字体大小：1.2em；
        颜色：#999；
        保证金底部：0；
        }
        h2 {
        字体大小：2em；
        保证金顶部：0；
        填充顶部：0；

3.2.手动创建组件

我们可以根据需要手动创建上述文件，但要创建组件，我们只需要在文件夹 邮政编码。

4.如何导入角分量

创建组件后，我们需要通过将其导入文件“应用程序程序模块.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 命令生成组件邮政编码 生成的，那么它将自动进行上述突出显示的更改，否则我们必须手动进行。

5. Angular 组件元数据

组件元数据指的是定义在@零件装饰器中的特性。 @零件 装饰器将下面的类标识为组件类。

元数据 将模板与组件相关联，可以直接使用内联代码，也可以通过引用。组件及其模板共同描述了一个看法。

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() {
  }
}

以下是 元数据 中定义的最常用的属性：