NgModules
@H_301_11@ import { NgModule } from '@angular/core'; |
@NgModule({declarations:...,imports:..., exports:...,providers:...,bootstrap:...}) classMyModule{} |
@H_301_11@ 定义一个模块,其中包括组件、指令、管道和提供商。 |
declarations:[MyRedComponent,MyBlueComponent,MyDatePipe] |
@H_301_11@ 一个数组,包括从属于当前模块的组件、指令和管道。 |
imports:[BrowserModule,SomeOtherModule] |
@H_301_11@ 一个数组,包括被导入到当前模块中的所有模块。来自被导入模块的declarations 也同样对当前模块有效。 |
exports:[MyRedComponent,MyDatePipe]
@H_301_11@ 一个数组,包括对导入当前模块的模块可见的组件、指令、管道。 |
providers:[MyService,{provide:...}] |
@H_301_11@ 一个数组,包括在对前模块及导入当前模块的模块中的内容物(组件、指令、管道、提供商等)可见的依赖注入提供商。 |
bootstrap:[MyAppComponent]
@H_301_11@ 一个数组,包括由当前模块引导时应该引导的组件 |
模板语法
|
<input[value]="firstName"> |
@H_301_11@ 把属性value 绑定到表达式firstName 的结果。 |
<div[attr.role]="myAriaRole"> |
@H_301_11@ 把role 这个Attribute绑定到表达式myAriaRole 的结果。 |
<div[class.extra-sparkle]="isDelightful"> |
@H_301_11@ 把元素是否出现CSS类extra-sparkle ,绑定到一个表达式isDelightful 的结果是否为真。 |
<div[style.width.px]="mySize">
@H_301_11@ 把样式的width 属性绑定到表达式mySize 的结果,以px为单位。这个单位是可选的。 |
<button(click)="readRainbow($event)"> |
@H_301_11@ 当按钮(及其子元素)上的click事件被触发时,调用readRainbow 方法,并把事件对象作为参数传入。 |
<divtitle="Hello{{ponyName}}">
@H_301_11@ 把属性绑定到一个插值表达式字符串,比如 "Hello Seabiscuit"。它等价于:<div [title]="'Hello ' + ponyName"> |
<p>Hello{{ponyName}}</p> |
@H_301_11@ 把文本内容绑定到一个插值表达式,比如 "Hello Seabiscuit". |
<my-cmp[(title)]="name">
@H_301_11@ 设置双向数据绑定。等价于:<my-cmp [title]="name" (titleChange)="name=$event"> |
<video#movieplayer...> <button(click)="movieplayer.play()"> </video> |
@H_301_11@ 创建一个局部变量movieplayer ,它提供到video 元素实例的访问,可用于当前模板中的数据绑定和事件绑定表达式中。 |
<p*myUnless="myExpression">...</p>
@H_301_11@ * 符号表示当前元素将被转变成一个内嵌模板。等价于:<template [myUnless]="myExpression"><p>...</p></template> |
<p>CardNo.:{{cardNumber|myCardNumberFormatter}}</p> |
@H_301_11@ 通过名叫myCardNumberFormatter 的管道,转换表达式的当前值cardNumber 。 |
<p>Employer:{{employer?.companyName}}</p>
@H_301_11@ 安全导航运算符(?. )表示employer 字段是可选的,如果它是undefined ,表达式剩下的部分将被忽略 |
<svg:rectx="0"y="0"width="100"height="100"/> |
@H_301_11@ SVG模板需要在它们的根节点上带一个svg: 前缀,以消除模板中HTML元素和SVG元素的歧义。 |
<svg>
<rectx="0"y="0"width="100"height="100"/>
</svg>
@H_301_11@ <svg> 元素在无需前缀的情况下,也能被自动检测为SVG。 |
供指令类或组件类用的字段装饰器。
import { Input,107); padding:0px 4px; display:inline-block">@Input()myProperty;
| @H_301_11@ 声明一个输入属性,以便我们可以通过属性绑定更新它。(比如:<my-cmp [my-property]="someExpression"> ). |
@Output()myEvent=newEventEmitter();
@H_301_11@ 声明一个输出属性,以便我们可以通过事件绑定进行订阅。(比如:<my-cmp (my-event)="doSomething()"> ). |
@HostBinding('[class.valid]')isValid; |
@H_301_11@ 把宿主元素的属性(比如CSS类:valid)绑定到指令/组件的属性(比如:isValid)。 |
@HostListener('click',['$event'])onClick(e){...}
@H_301_11@ 通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click),可选传入一个参数($event)。 |
@ContentChild(myPredicate)myChildComponent; |
@H_301_11@ 把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。 |
@ContentChildren(myPredicate)myChildComponents;
@H_301_11@ 把组件内容查询(myPredicate)的全部结果,绑定到类的myChildComponents属性。 |
@ViewChild(myPredicate)myChildComponent; |
@H_301_11@ 把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。 |
@ViewChildren(myPredicate)myChildComponents;
@H_301_11@ 把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。 |
指令和组件的变更检测与生命周期钩子
@H_301_11@ (作为类方法实现) |
constructor(myService:MyService,...){...} |
@H_301_11@ 类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖,但是要避免用它做较重的工作。 |
ngOnChanges(changeRecord){...}
@H_301_11@ 在输入属性每次变化了之后、开始处理内容或子视图之前被调用。 |
ngOnInit(){...} |
@H_301_11@ 在执行构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。 |
ngDoCheck(){...}
@H_301_11@ 每当检查组件或指令的输入属性是否变化时调用。通过它,可以用自定义的检查方式来扩展变更检测逻辑。 |
ngAfterContentInit(){...} |
@H_301_11@ 当组件或指令的内容已经初始化、ngOnInit完成之后调用。 |
ngAfterContentChecked(){...}
@H_301_11@ 在每次检查完组件或指令的内容之后调用。 |
ngAfterViewInit(){...} |
@H_301_11@ 当组件的视图已经初始化完毕,每次ngAfterContentInit之后被调用。只适用于组件。 |
ngAfterViewChecked(){...}
@H_301_11@ 每次检查完组件的视图之后调用。只适用于组件。 |
ngOnDestroy(){...} |
@H_301_11@ 在所属实例被销毁前,只调用一次。 |
路由与导航
@H_301_11@ import { Routes,RouterModule,... } from '@angular/router'; |
constroutes:Routes=[ {path:'',component:HomeComponent}, {path:'path/:routeParam',component:MyComponent}, {path:'staticPath',component:...}, {path:'**', {path:'oldPath',redirectTo:'/staticPath'}, {path:...,component:...,data:{message:'Custom'}} ]); constrouting=RouterModule.forRoot(routes); |
@H_301_11@ 为应用配置路由。支持静态、参数化、重定向和通配符路由。还支持自定义路由数据和解析。 |
<router-outlet></router-outlet> <router-outletname="aux"></router-outlet>
|
@H_301_11@ 标记一个位置,用于加载当前激活路由的组件。 |
<arouterLink="/path"> <a[routerLink]="['/path',routeParam]"> <a[routerLink]="['/path',{matrixParam:'value'}]"> <a[routerLink]="['/path']"[queryParams]="{page:1}"> <a[routerLink]="['/path']"fragment="anchor">
|
@H_301_11@ 基于路由指令创建指向不同视图的链接,由路由路径、必选参数、可选参数、查询参数和片段(fragment)组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。添加“../sibling”前缀可以导航到兄弟路由或父路由。 |
<a[routerLink]="['/path']"routerLinkActive="active">
@H_301_11@ 当routerLink 被激活时,就把指定的CSS类添加到该元素上。 |
classCanActivateGuardimplementsCanActivate{ canActivate( route:ActivatedRouteSnapshot, state:RouterStateSnapshot ):Observable<boolean>|Promise<boolean>|boolean{...} } {path:...,canActivate:[CanActivateGuard]} |
@H_301_11@ 一个用来定义类的接口,路由器会首先调用它来决定是否应该激活该组件。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。 |
classCanDeactivateGuardimplementsCanDeactivate<T>{
canDeactivate(
component:T,
route:ActivatedRouteSnapshot,canDeactivate:[CanDeactivateGuard]}
@H_301_11@ 一个用来定义类的接口,路由器在导航后会首先调用它来决定是否应该取消该组件的激活状态。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。 |
classCanActivateChildGuardimplementsCanActivateChild{ canActivateChild( route:ActivatedRouteSnapshot,canActivateChild:[CanActivateGuard], children:...} |
@H_301_11@ 一个用来定义类的接口,路由器会首先调用它来决定是否应该激活该子路由。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。 |
classResolveGuardimplementsResolve<T>{
resolve(
route:ActivatedRouteSnapshot,
state:RouterStateSnapshot
):Observable<any>|Promise<any>|any{...}
}
{path:...,resolve:[ResolveGuard]}
@H_301_11@ 一个用来定义类的接口,路由器会在渲染该路由之前先调用它来解析路由数据。应该返回一个值或能解析为值的可观察对象(Observable)或承诺(Promise)。 |
classCanLoadGuardimplementsCanLoad{ canLoad( route:Route ):Observable<boolean>|Promise<boolean>|boolean{...} } {path:...,canLoad:[CanLoadGuard],loadChildren:...} |
@H_301_11@ 一个用来定义类的接口,路由器会首先调用它来决定一个惰性加载的模块是否应该被加载。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。 |