Angular2
语法指南
引导
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';platformBrowserDynamic().bootstrapModule(AppModule)；使⽤JIT 编译器引导⼀个AppModule 模块定义的应⽤
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]⼀个数组，包括由当前模块引导时应该引导的组件
模板语法
<input [value]="firstName">
把属性value 绑定到表达式firstName 的结果。<div [le]="myAriaRole">
把role 这个Attribute 绑定到表达式 myAriaRole 的结果。<div [a-sparkle]="isDelightful">
svg实例
把元素是否出现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?panyName}}</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 。
内置指令
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}的映射表。
表单import { FormsModule } from '@angular/forms';
<input [(ngModel)]="userName">提供双向绑定，为表单控件提供解析和验证。
类装饰器import { Directive, ... } from '@angular/core';
@Component({...})
class MyComponent() {}声明当前类是⼀个组件，并提供关于该组件的元数据。
@Directive({...})
class MyDirective() {}声明当前类是⼀个指令，并提供关于该指令的元数据。
@Pipe({...})
class MyPipe() {}声明当前类是⼀个管道，并且提供关于该管道的元数据。
@Injectable()
class MyService() {}声明当前类有⼀些依赖，当依赖注⼊器创建该类的实例时，这些依赖应该被注⼊到构造函数中。
、
指令配置@Directive({ property1: value1, ... })
指定⼀个CSS选择器，以便在模板中出该指令。⽀持的选择器包括element, [attribute], .class, 和:not()。
selector: '.cool-button:not(a)'
不⽀持⽗⼦关系选择器。
providers: [MyService, { provide: ... }]为当前指令及其⼦指令提供依赖注⼊的providers数组。
组件配置@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的列表，⽤于给组件的视图添加样式。
供指令类或组件类⽤的字段装饰器。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属性。对指令⽆效。
指令和组件的变更检测与⽣命周期钩⼦(作为类⽅法实现)
constructor(myService: MyService, ...) { ... }类的构造函数会在所有其它⽣命周期钩⼦之前调⽤。使⽤它来注⼊依赖，但是要避免⽤它做较重的⼯作。
ngOnChanges(changeRecord) { ... }在输⼊属性每次变化了之后、开始处理内容或⼦视图之前被调⽤。
ngOnInit() { ... }在执⾏构造函数、初始化输⼊属性、第⼀次调⽤完ngOnChanges之后调⽤。
ngDoCheck() { ... }每当检查组件或指令的输⼊属性是否变化时调⽤。通过它，可以⽤⾃定义的检查⽅式来扩展变更检测逻辑。
ngAfterContentInit() { ... }当组件或指令的内容已经初始化、ngOnInit完成之后调⽤。
ngAfterContentChecked() { ... }在每次检查完组件或指令的内容之后调⽤。
ngAfterViewInit() { ... }当组件的视图已经初始化完毕，每次ngAfterContentInit之后被调⽤。只适⽤于组件。
ngAfterViewChecked() { ... }每次检查完组件的视图之后调⽤。只适⽤于组件。
ngOnDestroy() { ... }在所属实例被销毁前，只调⽤⼀次。
依赖注⼊配置
{ provide: MyService, useClass: MyMockService }把MyService类的提供商设置或改写为MyMockService。
{ provide: MyService, useFactory: myFactory }把MyService的提供商设置或改写为myFactory⼯⼚函数。
{ provide: MyValue, useValue: 41 }把MyValue的提供商设置或改写为值41。
路由与导航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）组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到⼦路由。添
加“../sibling”前缀可以导航到兄弟路由或⽗路由。
<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)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。