概论 · Angular

零部件分类

• 1.1 综合模块 @NgModule
• 1.2 路由模块 @NgModule

• 2.1 视图组件 @Component
• 2.2 指令 @Directive
• 2.3 管道 @Pipe
• 2.4 上下文服务 @Injectable

• 3. 零部件生命周期

综合模块

1. 普通模块 返回

@NgModule({
  declarations: [], // 组件、指令、管道 @他们共享此模块上下文
  providers: [], // 服务 @并在组件中注入使用
  //
  imports: [], // 导入其他模块，全局仅@
  exports: [], // 暴漏其他模块
  bootstrap: [],
})
export class AppModule {}

2. 全局模块 返回

@NgModule({
  declarations: [], // 组件、指令、指令
  exports: [], // 组件、指令、指令
})
export class SharedModule {}

视图组件

1. 定义组件 返回

import { Component } from '@angular/core';

@Component({
  selector,
  templateUrl,
  providers, // @Injectable 上下文服务
  styleUrls,
})
export class Component {
  constructor(
    private provider: Injectable // @Injectable 上下文服务
  ){}
}

2. 组件数据接收 返回

import { Component, Input } from '@angular/core';

@Component(...)
export class Child {
  @Input() type: String;
}

......
<child [type]="Hello !"/>

3. 模板语法 返回

// 1.组件模板 <= 组件类的数据
<p>{{ name }}</p>

// 2.组件模板 <= 组件事件
<p (click)="method('hello!')"></p>

// 3.组件模板 <=> 组件类的数据
// <input [(ngModel)]="name" />

// 4.模板 if 指令
// <div *ngIf="Boolean; else IdSelector">Editorable!</div>
// <div #IdSelector>NoEditorable</div>

// 5.模板 for 指令
// <li *ngFor="let user of users; index as i; first as isFirst"></li>
// index: number：可迭代对象中当前条目的索引。
// count: number：可迭代对象的长度。
// first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。
// last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 true。
// even: boolean：如果当前条目在可迭代对象中的索引号为偶数则为 true。
// odd: boolean：如果当前条目在可迭代对象中的索引号为奇数则为 true。

4. 向父组件发送数据 返回

import { Component, Output } from '@angular/core';

@Component(...)
export class Child {

  @Output() messager = new EventEmitter<Type>();

  sendMessage(any: Type) {
    this.messager.emit(any);
  }
}

......
<child (messager)="next($event)"/>

管道

• 返回

// 1.内置管道
<h1>{{key | uppercase}} Details</h1>

路由

• 返回
  （1/）定义路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [{ path, component }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

（2/）注册路由

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

上下文服务

1. 声明服务 返回

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class SomeService {
  constructor(private http: HttpClient) { }
}

1. 注册服务到（模块/组件） 返回

import { NgModule } from '@angular/core';

@NgModule({
  providers: [
    SomeService,
  ],
})
export class AppModule {}

零部件生命周期

• 返回

- ngOnChanges - ngOnInit - ngDoCheck 
- ngAfterContentInit - ngAfterContentChecked
- ngAfterViewInit - ngAfterViewChecked
- ngOnDestroy