Angular 語法大全快速詳細指南

Angular 語法大全快速詳細指南

https://my.oschina.net/zengfr

//引導    

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);    

//從一個指定的NgModule中使用根組件引導應用

• 1
• 2
• 3
• 4
• 5
• 6
• 7

NgModules   

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

@NgModule({ declarations: ..., imports: ...,
     exports: ..., providers: ..., bootstrap: ...})
class MyModule {}   
//定義一個模塊，其中包括組件、指令、管道和提供商。

declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]     
//一個數組，包括從屬於當前模塊的組件、指令和管道。

imports: [BrowserModule, SomeOtherModule]   
//一個數組，包括被導入到當前模塊中的所有模塊。來自被導入模塊的declarations也同樣對當前模塊有效。

exports: [MyRedComponent, MyDatePipe]   
//一個數組，包括對導入當前模塊的模塊可見的組件、指令、管道。

providers: [MyService, { provide: ... }]    
//一個數組，包括在對前模塊及導入當前模塊的模塊中的內容物（組件、指令、管道、提供商等）可見的依賴注入提供商。

bootstrap: [MyAppComponent]     
//一個數組，包括由當前模塊引導時應該引導的組件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

模板語法    

<input [value]="firstName">     
//把屬性value綁定到表達式firstName的結果。

<div [attr.role]="myAriaRole">  
//把role這個Attribute綁定到表達式 myAriaRole的結果。

<div [class.extra-sparkle]="isDelightful">  
//把元素是否出現CSS類extra-sparkle，綁定到一個表達式isDelightful的結果是否爲真。

<div [style.width.px]="mySize">     
//把樣式的width屬性綁定到表達式mySize的結果，以px爲單位。這個單位是可選的。

<button (click)="readRainbow($event)">     
//當按鈕(及其子元素)上的click事件被觸發時，調用readRainbow方法，並把事件對象作爲參數傳入。

<div title="Hello {{ponyName}}">    
//把屬性綁定到一個插值表達式字符串，比如 "Hello Seabiscuit"。它等價於： <div [title]="'Hello ' + ponyName">

<p>Hello {{ponyName}}</p>   
//把文本內容綁定到一個插值表達式，比如 "Hello Seabiscuit".

<my-cmp [(title)]="name">   
//設置雙向數據綁定。等價於：<my-cmp [title]="name" (titleChange)="name=$event">

<video #movieplayer ...>
  <button (click)="movieplayer.play()">
</video>    
//創建一個局部變量 movieplayer ，它提供到video元素實例的訪問，可用於當前模板中的數據綁定和事件綁定表達式中。

<p *myUnless="myExpression">...</p>     
//*符號表示當前元素將被轉變成一個內嵌模板。等價於： <template [myUnless]="myExpression"><p>...</p></template>

<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>     
//通過名叫myCardNumberFormatter的管道，轉換表達式的當前值cardNumber。

<p>Employer: {{employer?.companyName}}</p>  
//安全導航運算符(?)表示employer字段是可選的，如果它是undefined，表達式剩下的部分將被忽略

<svg:rect x="0" y="0" width="100" height="100"/>    
//SVG模板需要在它們的根節點上帶一個svg:前綴，以消除模板中HTML元素和SVG元素的歧義。

<svg>
  <rect x="0" y="0" width="100" height="100"/>
</svg>  
//<svg>根元素在無需前綴的情況下，也能被自動檢測爲SVG。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47

內置指令    

import { CommonModule } from '@angular/common';
<section *ngIf="showSection">   
//基於showSection表達式的值移除或重新創建部分DOM樹。

<li *ngFor="let item of list">  
//把li元素及其內容轉化成一個模板，並用它來爲列表中的每個條目初始化視圖。

<div [ngSwitch]="conditionExpression">
  <template [ngSwitchCase]="case1Exp">...</template>
  <template ngSwitchCase="case2LiteralString">...</template>
  <template ngSwitchDefault>...</template>
</div>  
//基於conditionExpression的當前值，從內嵌模板中選取一個，有條件的切換div的內容。

<div [ngClass]="{active: isActive, disabled: isDisabled}">  
//把一個元素上CSS類的出現與否，綁定到一個真值映射表上。右側的表達式應該返回類似{class-name: true/false}的映射表。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

表單  

import { FormsModule } from '@angular/forms';
<input [(ngModel)]="userName">  
//提供雙向綁定，爲表單控件提供解析和驗證。

• 1
• 2
• 3
• 4
• 5

類裝飾器    

import { Directive, ... } from '@angular/core';
@Component({...})
class MyComponent() {}  
//聲明當前類是一個組件，並提供關於該組件的元數據。

@Directive({...})
class MyDirective() {}  
//聲明當前類是一個指令，並提供關於該指令的元數據。

@Pipe({...})
class MyPipe() {}   
//聲明當前類是一個管道，並且提供關於該管道的元數據。

@Injectable()
class MyService() {}    
//聲明當前類有一些依賴，當依賴注入器創建該類的實例時，這些依賴應該被注入到構造函數中。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

指令配置    

@Directive({ property1: value1, ... })
selector: '.cool-button:not(a)'     
//指定一個CSS選擇器，以便在模板中找出該指令。支持的選擇器包括element, [attribute], .class, 和 :not()。
不支持父子關係選擇器。

providers: [MyService, { provide: ... }]    
//爲當前指令及其子指令提供依賴注入的providers數組。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

組件配置    

@Component擴展了@Directive, 以便@Directive中的配置項也能用在組件上
moduleId: module.id     
//如果設置了，templateUrl和styleUrl會被解析成相對於組件的。

viewProviders: [MyService, { provide: ... }]    
//依賴注入provider的數組，侷限於當前組件的視圖中。

template: 'Hello {{name}}'
templateUrl: 'my-component.html'    
//當前組件視圖的內聯模板或外部模板地址

styles: ['.primary {color: red}']
styleUrls: ['my-component.css']     
//內聯CSS樣式或外部樣式表URL的列表，用於給組件的視圖添加樣式。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

供指令類或組件類用的字段裝飾器。    

import { Input, ... } from '@angular/core';
@Input() myProperty;    

聲明一個輸入屬性，以便我們可以通過屬性綁定更新它。(比如： <my-cmp [my-property]="someExpression">).
@Output() myEvent = new EventEmitter();     

聲明一個輸出屬性，以便我們可以通過事件綁定進行訂閱。(比如：<my-cmp (my-event)="doSomething()">).
@HostBinding('[class.valid]') isValid;  

把宿主元素的屬性(比如CSS類：valid)綁定到指令/組件的屬性(比如：isValid)。
@HostListener('click', ['$event']) onClick(e) {...}    

通過指令/組件的方法(例如onClick)訂閱宿主元素的事件(例如click)，可選傳入一個參數($event)。
@ContentChild(myPredicate) myChildComponent;    

把組件內容查詢(myPredicate)的第一個結果綁定到類的myChildComponent屬性。
@ContentChildren(myPredicate) myChildComponents;    

把組件內容查詢(myPredicate)的全部結果，綁定到類的myChildComponents屬性。
@ViewChild(myPredicate) myChildComponent;   

把組件視圖查詢(myPredicate)的第一個結果綁定到類的myChildComponent屬性。對指令無效。
@ViewChildren(myPredicate) myChildComponents;   

把組件視圖查詢(myPredicate)的全部結果綁定到類的myChildComponents屬性。對指令無效。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

指令和組件的變更檢測與生命週期鉤子   

(作爲類方法實現)
constructor(myService: MyService, ...) { ... }  

類的構造函數會在所有其它生命週期鉤子之前調用。使用它來注入依賴，但是要避免用它做較重的工作。
ngOnChanges(changeRecord) { ... }   

在輸入屬性每次變化了之後、開始處理內容或子視圖之前被調用。
ngOnInit() { ... }  

在執行構造函數、初始化輸入屬性、第一次調用完ngOnChanges之後調用。
ngDoCheck() { ... }     

每當檢查組件或指令的輸入屬性是否變化時調用。通過它，可以用自定義的檢查方式來擴展變更檢測邏輯。
ngAfterContentInit() { ... }    

當組件或指令的內容已經初始化、ngOnInit完成之後調用。
ngAfterContentChecked() { ... }     

在每次檢查完組件或指令的內容之後調用。
ngAfterViewInit() { ... }   

當組件的視圖已經初始化完畢，每次ngAfterContentInit之後被調用。只適用於組件。
ngAfterViewChecked() { ... }    

每次檢查完組件的視圖之後調用。只適用於組件。
ngOnDestroy() { ... }   

在所屬實例被銷燬前，只調用一次。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

依賴注入配置  
{ provide: MyService, useClass: MyMockService }     

把MyService類的提供商設置或改寫爲MyMockService。
{ provide: MyService, useFactory: myFactory }   

把MyService的提供商設置或改寫爲myFactory工廠函數。
{ provide: MyValue, useValue: 41 }  

把MyValue的提供商設置或改寫爲值41。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

路由與導航   

import { Routes, RouterModule, ... } from '@angular/router';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'path/:routeParam', component: MyComponent },
  { path: 'staticPath', component: ... },
  { path: '**', component: ... },
  { path: 'oldPath', redirectTo: '/staticPath' },
  { path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes);   

爲應用配置路由。支持靜態、參數化、重定向和通配符路由。還支持自定義路由數據和解析。

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>


標記一個位置，用於加載當前激活路由的組件。

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">


基於路由指令創建指向不同視圖的鏈接，由路由路徑、必選參數、可選參數、查詢參數和片段（fragment）組成。添加“/”前綴可以導航到根路由。添加“./”前綴可以導航到子路由。添加“../”前綴可以導航到兄弟路由或父路由。
<a [routerLink]="[ '/path' ]" routerLinkActive="active">    

當routerLink被激活時，就把指定的CSS類添加到該元素上。
class CanActivateGuard implements CanActivate {
    canActivate(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivate: [CanActivateGuard] }  

一個用來定義類的接口，路由器會首先調用它來決定是否應該激活該組件。應該返回布爾值或能解析爲布爾值的可觀察對象(Observable)或承諾(Promise)。
class CanDeactivateGuard implements CanDeactivate<T> {
    canDeactivate(
      component: T,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] }  

一個用來定義類的接口，路由器在導航後會首先調用它來決定是否應該取消該組件的激活狀態。應該返回布爾值或能解析爲布爾值的可觀察對象(Observable)或承諾(Promise)。
class CanActivateChildGuard implements CanActivateChild {
    canActivateChild(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
    children: ... }     

一個用來定義類的接口，路由器會首先調用它來決定是否應該激活該子路由。應該返回布爾值或能解析爲布爾值的可觀察對象(Observable)或承諾(Promise)。
class ResolveGuard implements Resolve<T> {
    resolve(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] }  

一個用來定義類的接口，路由器會在渲染該路由之前先調用它來解析路由數據。應該返回一個值或能解析爲值的可觀察對象(Observable)或承諾(Promise)。
class CanLoadGuard implements CanLoad {
    canLoad(
      route: Route
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }   

一個用來定義類的接口，路由器會首先調用它來決定一個惰性加載的模塊是否應該被加載。
應該返回布爾值或能解析爲布爾值的可觀察對象(Observable)或承諾(Promise)。 

https://my.oschina.net/zengfr