",
"bold": [
"[ngClass]"
],
"description": "
把一个元素上CSS类的出现与否,绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。
\n"
}
],
"index": 2
},
{
"name": "表单",
"description": "
import {FORM_DIRECTIVES} from 'angular2/common';
\n\n
\n",
"items": [
{
"syntax": "
",
"bold": [
"[(ngModel)]"
],
"description": "
提供双向绑定,为表单控件提供解析和验证。
\n"
}
],
"index": 3
},
{
"name": "类装饰器",
"description": "
import {Directive, ...} from 'angular2/core';
\n\n
\n",
"items": [
{
"syntax": "@Component({...})\nclass MyComponent() {}",
"bold": [
"@Component({...})"
],
"description": "
声明当前类是一个组件,并提供关于该组件的元数据。
\n"
},
{
"syntax": "@Directive({...})\nclass MyDirective() {}",
"bold": [
"@Directive({...})"
],
"description": "
声明当前类是一个指令,并提供关于该指令的元数据。
\n"
},
{
"syntax": "@Pipe({...})\nclass MyPipe() {}",
"bold": [
"@Pipe({...})"
],
"description": "
声明当前类是一个管道,并且提供该管道的元数据。
\n"
},
{
"syntax": "@Injectable()\nclass MyService() {}",
"bold": [
"@Injectable()"
],
"description": "
声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。\n\n
\n"
}
],
"index": 4
},
{
"name": "指令配置",
"description": "
@Directive({ property1: value1, ... })
\n\n
\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "
指定一个CSS选择器,以便在模板中找出该指令。支持的选择器包括element
,\n[attribute]
, .class
, 和 :not()
。
\n
不支持父子关系选择器。
\n"
},
{
"syntax": "providers: [MyService, provide(...)]",
"bold": [
"providers:"
],
"description": "
为当前指令及其子指令提供依赖注入的providers数组。
\n"
}
],
"index": 5
},
{
"name": "组件配置",
"description": "
\n@Component
extends @Directive
,\nso the @Directive
configuration applies to components as well
\n",
"items": [
{
"syntax": "viewProviders: [MyService, provide(...)]",
"bold": [
"viewProviders:"
],
"description": "
依赖注入provider的数组,局限于当前组件的视图中。
\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "
当前组件视图的内联模板或外部模板地址
\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "
内联CSS样式或外部样式表URL的列表,用于给组件的视图添加样式。
\n"
},
{
"syntax": "directives: [MyDirective, MyComponent]",
"bold": [
"directives:"
],
"description": "
组件模板中用到的指令列表。
\n"
},
{
"syntax": "pipes: [MyPipe, OtherPipe]",
"bold": [
"pipes:"
],
"description": "
组件模板中用到的管道列表。
\n"
}
],
"index": 6
},
{
"name": "供指令类或组件类用的字段装饰器。",
"description": "
import {Input, ...} from 'angular2/core';
\n\n
\n",
"items": [
{
"syntax": "@Input() myProperty;",
"bold": [
"@Input()"
],
"description": "
声明一个输入属性,以便我们可以通过属性绑定更新它。(比如:\n<my-cmp [my-property]="someExpression">
).
\n"
},
{
"syntax": "@Output() myEvent = new EventEmitter();",
"bold": [
"@Output()"
],
"description": "
声明一个输出属性,以便我们可以通过事件绑定进行订阅。(比如:<my-cmp (my-event)="doSomething()">
)
\n"
},
{
"syntax": "@HostBinding('[class.valid]') isValid;",
"bold": [
"@HostBinding('[class.valid]')"
],
"description": "
把宿主元素的属性(比如CSS类:valid)绑定到指令/组件的属性(比如:isValid)。
\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
"description": "
通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click),可选传入一个参数($event)。
\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
"bold": [
"@ContentChild(myPredicate)"
],
"description": "
把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。
\n"
},
{
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
"bold": [
"@ContentChildren(myPredicate)"
],
"description": "
把组件内容查询(MyPredicate)的全部结果,绑定到类的myChildComponents属性。
\n"
},
{
"syntax": "@ViewChild(myPredicate) myChildComponent;",
"bold": [
"@ViewChild(myPredicate)"
],
"description": "
把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。
\n"
},
{
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
"bold": [
"@ViewChildren(myPredicate)"
],
"description": "
把组件视图查询(myPredicate)的所有结果绑定到类的myChildComponents属性。对指令无效。
\n"
}
],
"index": 7
},
{
"name": "指令和组件的变更检测与生命周期钩子",
"description": "
(作为类方法实现)\n
\n",
"items": [
{
"syntax": "constructor(myService: MyService, ...) { ... }",
"bold": [
"constructor(myService: MyService, ...)"
],
"description": "
类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖,但是要避免用它做较重的工作。
\n"
},
{
"syntax": "ngOnChanges(changeRecord) { ... }",
"bold": [
"ngOnChanges(changeRecord)"
],
"description": "
在输入属性每次变化了之后、开始处理内容或子视图之前被调用。
\n"
},
{
"syntax": "ngOnInit() { ... }",
"bold": [
"ngOnInit()"
],
"description": "
在构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。
\n"
},
{
"syntax": "ngDoCheck() { ... }",
"bold": [
"ngDoCheck()"
],
"description": "
每当检查组件或指令的输入属性是否变化时调用。通过它,可以用自定义的检查方式来扩展变更检测逻辑。
\n"
},
{
"syntax": "ngAfterContentInit() { ... }",
"bold": [
"ngAfterContentInit()"
],
"description": "
当组件或指令的内容已经初始化、ngOnInit完成之后调用。
\n"
},
{
"syntax": "ngAfterContentChecked() { ... }",
"bold": [
"ngAfterContentChecked()"
],
"description": "
在每次检查完组件或指令的内容之后调用。
\n"
},
{
"syntax": "ngAfterViewInit() { ... }",
"bold": [
"ngAfterViewInit()"
],
"description": "
当组件的视图已经初始化完毕,每次ngAfterContentInit之后被调用。只适用于组件。
\n"
},
{
"syntax": "ngAfterViewChecked() { ... }",
"bold": [
"ngAfterViewChecked()"
],
"description": "
每次检查完组件的视图之后调用。只适用于组件。
\n"
},
{
"syntax": "ngOnDestroy() { ... }",
"bold": [
"ngOnDestroy()"
],
"description": "
在所属实例被销毁前,只调用一次。
\n"
}
],
"index": 8
},
{
"name": "依赖注入配置",
"description": "
import {provide} from 'angular2/core';
\n\n
\n",
"items": [
{
"syntax": "provide(MyService, {useClass: MyMockService})",
"bold": [
"provide",
"useClass"
],
"description": "
把MyService类的Provider设置或改写为MyMockService。
\n"
},
{
"syntax": "provide(MyService, {useFactory: myFactory})",
"bold": [
"provide",
"useFactory"
],
"description": "
把MyService的Provider设置或改写为myFactory工厂函数。
\n"
},
{
"syntax": "provide(MyValue, {useValue: 41})",
"bold": [
"provide",
"useValue"
],
"description": "
把MyValue的Provider设置或改写为值41。
\n"
}
],
"index": 9
},
{
"name": "路由与导航",
"description": "
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';
\n\n
\n",
"items": [
{
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, name: 'MyCmp' },\n { path: '/staticPath', component: ..., name: ...},\n { path: '/*wildCardParam', component: ..., name: ...}\n])\nclass MyComponent() {}",
"bold": [
"@RouteConfig"
],
"description": "
为所装饰的组件配置路由。支持静态、参数化、带通配符的路由。
\n"
},
{
"syntax": "
",
"bold": [
"router-outlet"
],
"description": "
标记一个位置,用于加载当前激活路由的组件。
\n"
},
{
"syntax": "
",
"bold": [
"[routerLink]"
],
"description": "基于路由指令创建指向不同视图的链接,由路由名和可选参数组成。路由名匹配一个已配置路由的name属性。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。
\n"
},
{
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
"bold": [
"@CanActivate"
],
"description": "用函数定义的一个组件装饰器,路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺(Promise)。
\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
"description": "导航到一个组件之后,路由器调用该组件的routerOnActivate方法(如已定义)。
\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
"description": "路由器调用组件的routerCanReuse方法(如已定义)来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺(Promise)。
\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
"description": "当路由器可以复用一个组件实例时,它调用组件的routerOnReuse方法(如已定义)。
\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
"description": "路由器会调用要完成导航所需移除的每个组件的routerCanDeactivate方法(如已定义)。当且仅当所有的该方法都返回true或者承诺(Promise)被解析(Resolve)时,导航才会继续。
\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
"description": "在每个指令因为路由变更而被移除之前调用。可以返回一个承诺,来阻止移除本指令 —— 直到承诺(Promise)被解析(Resolve)。
\n"
}
],
"index": 10
}
]
}