Zhicheng Wang
parent
48e03ae748
commit
53a55f2db3
|
|
@ -1,7 +1,8 @@
|
||||||
- var base = current.path[4] ? '.' : './guide';
|
- var base = current.path[4] ? '.' : './guide';
|
||||||
.banner
|
.banner
|
||||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
||||||
|
p.text-body 本小抄是临时的，将来可能改变。Angular 2目前还是Beta状态。
|
||||||
|
|
||||||
article(class="l-content-small grid-fluid docs-content")
|
article(class="l-content-small grid-fluid docs-content")
|
||||||
.cheatsheet
|
.cheatsheet
|
||||||
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
ngio-cheatsheet(src= base + '/cheatsheet-cn.json')
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,513 @@
|
||||||
|
{
|
||||||
|
"currentEnvironment": "TypeScript",
|
||||||
|
"version": {
|
||||||
|
"raw": "2.0.0-rc.1",
|
||||||
|
"major": 2,
|
||||||
|
"minor": 0,
|
||||||
|
"patch": 0,
|
||||||
|
"prerelease": [
|
||||||
|
"local"
|
||||||
|
],
|
||||||
|
"build": "sha.48e03ae",
|
||||||
|
"version": "2.0.0-local",
|
||||||
|
"codeName": "snapshot",
|
||||||
|
"isSnapshot": true,
|
||||||
|
"full": "2.0.0-local+sha.48e03ae",
|
||||||
|
"branch": "master",
|
||||||
|
"commitSHA": "48e03ae748c0d68292380c4af2361faab5f6b497"
|
||||||
|
},
|
||||||
|
"sections": [
|
||||||
|
{
|
||||||
|
"name": "引导",
|
||||||
|
"description": "<p><code>import {bootstrap} from 'angular2/platform/browser';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
||||||
|
"bold": [
|
||||||
|
"provide"
|
||||||
|
],
|
||||||
|
"description": "<p>以MyAppComponent作为根组件引导应用，并且配置DI的各种provider。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "模板语法",
|
||||||
|
"description": "",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "<input [value]=\"firstName\">",
|
||||||
|
"bold": [
|
||||||
|
"[value]"
|
||||||
|
],
|
||||||
|
"description": "<p>把属性<code>value</code>绑定到表达式<code>firstName</code>的结果。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||||
|
"bold": [
|
||||||
|
"[attr.role]"
|
||||||
|
],
|
||||||
|
"description": "<p>把Attribute <code>role</code> 绑定到表达式 <code>myAriaRole</code>的结果。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||||
|
"bold": [
|
||||||
|
"[class.extra-sparkle]"
|
||||||
|
],
|
||||||
|
"description": "<p>把元素是否出现CSS类<code>extra-sparkle</code>，绑定到一个表达式<code>isDelightful</code>的结果是否为真。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||||
|
"bold": [
|
||||||
|
"[style.width.px]"
|
||||||
|
],
|
||||||
|
"description": "<p>把样式的<code>width</code>属性绑定到表达式<code>mySize</code>的结果，以px为单位。这个单位是可选的。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||||
|
"bold": [
|
||||||
|
"(click)"
|
||||||
|
],
|
||||||
|
"description": "<p>当按钮（及其子元素）上的click事件被触发时，调用<code>readRainbow</code>方法，并把事件对象作为参数传入。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||||
|
"bold": [
|
||||||
|
"{{ponyName}}"
|
||||||
|
],
|
||||||
|
"description": "<p>把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit". 等价于：\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||||
|
"bold": [
|
||||||
|
"{{ponyName}}"
|
||||||
|
],
|
||||||
|
"description": "<p>把文本内容绑定到一个插值表达式，比如 "Hello Seabiscuit".</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||||
|
"bold": [
|
||||||
|
"[(title)]"
|
||||||
|
],
|
||||||
|
"description": "<p>设置双向数据绑定。等价于：<code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||||
|
"bold": [
|
||||||
|
"#movieplayer",
|
||||||
|
"(click)"
|
||||||
|
],
|
||||||
|
"description": "<p>创建一个局部变量 <code>movieplayer</code> ，它提供到<code>video</code>元素实例的访问，可用于当前模板中的数据绑定和事件绑定表达式中。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<p *myUnless=\"myExpression\">...</p>",
|
||||||
|
"bold": [
|
||||||
|
"*myUnless"
|
||||||
|
],
|
||||||
|
"description": "<p><code>*</code>符号表示当前元素将被转变成一个内嵌模板。等价于：\n<code><template [myUnless]="myExpression"><p>...</p></template></code></p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
||||||
|
"bold": [
|
||||||
|
"{{cardNumber | myCreditCardNumberFormatter}}"
|
||||||
|
],
|
||||||
|
"description": "<p>通过名叫<code>myCreditCardNumberFormatter</code>的管道，转换表达式的当前值<code>cardNumber</code>。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||||
|
"bold": [
|
||||||
|
"{{employer?.companyName}}"
|
||||||
|
],
|
||||||
|
"description": "<p>安全导航运算符(<code>?</code>)表示<code>employer</code>字段是可选的，如果它是<code>undefined</code>表达式剩下的部分将被忽略</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "内建指令",
|
||||||
|
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "<section *ngIf=\"showSection\">",
|
||||||
|
"bold": [
|
||||||
|
"*ngIf"
|
||||||
|
],
|
||||||
|
"description": "<p>基于showSection表达式的值移除或重新创建部分DOM树。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<li *ngFor=\"let item of list\">",
|
||||||
|
"bold": [
|
||||||
|
"*ngFor"
|
||||||
|
],
|
||||||
|
"description": "<p>把li元素及其内容转化成一个模板，并用它来为列表中的每个条目初始化视图。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||||
|
"bold": [
|
||||||
|
"[ngSwitch]",
|
||||||
|
"[ngSwitchWhen]",
|
||||||
|
"ngSwitchWhen",
|
||||||
|
"ngSwitchDefault"
|
||||||
|
],
|
||||||
|
"description": "<p>基于conditionExpression的当前值，从内嵌模板中选取一个，有条件的切换div的内容。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||||
|
"bold": [
|
||||||
|
"[ngClass]"
|
||||||
|
],
|
||||||
|
"description": "<p>把一个元素上CSS类的出现与否，绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "表单",
|
||||||
|
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||||
|
"bold": [
|
||||||
|
"[(ngModel)]"
|
||||||
|
],
|
||||||
|
"description": "<p>提供双向绑定，为表单控件提供解析和验证。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "类装饰器",
|
||||||
|
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "@Component({...})\nclass MyComponent() {}",
|
||||||
|
"bold": [
|
||||||
|
"@Component({...})"
|
||||||
|
],
|
||||||
|
"description": "<p>声明当前类是一个组件，并提供关于该组件的元数据。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@Directive({...})\nclass MyDirective() {}",
|
||||||
|
"bold": [
|
||||||
|
"@Directive({...})"
|
||||||
|
],
|
||||||
|
"description": "<p>声明当前类是一个指令，并提供关于该指令的元数据。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
||||||
|
"bold": [
|
||||||
|
"@Pipe({...})"
|
||||||
|
],
|
||||||
|
"description": "<p>声明当前类是一个管道，并且提供该管道的元数据。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@Injectable()\nclass MyService() {}",
|
||||||
|
"bold": [
|
||||||
|
"@Injectable()"
|
||||||
|
],
|
||||||
|
"description": "<p>声明当前类有一些依赖，当依赖注入器创建该类的实例时，这些依赖应该被注入到构造函数中。\n\n</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "指令配置",
|
||||||
|
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "selector: '.cool-button:not(a)'",
|
||||||
|
"bold": [
|
||||||
|
"selector:"
|
||||||
|
],
|
||||||
|
"description": "<p>指定一个CSS选择器，以便在模板中找出该指令。支持的选择器包括<code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, 和 <code>:not()</code>。</p>\n<p>不支持父子关系选择器。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "providers: [MyService, provide(...)]",
|
||||||
|
"bold": [
|
||||||
|
"providers:"
|
||||||
|
],
|
||||||
|
"description": "<p>为当前指令及其子指令提供依赖注入的providers数组。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "组件配置",
|
||||||
|
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "viewProviders: [MyService, provide(...)]",
|
||||||
|
"bold": [
|
||||||
|
"viewProviders:"
|
||||||
|
],
|
||||||
|
"description": "<p>依赖注入provider的数组，局限于当前组件的视图中。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||||
|
"bold": [
|
||||||
|
"template:",
|
||||||
|
"templateUrl:"
|
||||||
|
],
|
||||||
|
"description": "<p>当前组件视图的内联模板或外部模板地址</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||||
|
"bold": [
|
||||||
|
"styles:",
|
||||||
|
"styleUrls:"
|
||||||
|
],
|
||||||
|
"description": "<p>内联CSS样式或外部样式表URL的列表，用于给组件的视图添加样式。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "directives: [MyDirective, MyComponent]",
|
||||||
|
"bold": [
|
||||||
|
"directives:"
|
||||||
|
],
|
||||||
|
"description": "<p>组件模板中用到的指令列表。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "pipes: [MyPipe, OtherPipe]",
|
||||||
|
"bold": [
|
||||||
|
"pipes:"
|
||||||
|
],
|
||||||
|
"description": "<p>组件模板中用到的管道列表。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "供指令类或组件类用的字段装饰器。",
|
||||||
|
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "@Input() myProperty;",
|
||||||
|
"bold": [
|
||||||
|
"@Input()"
|
||||||
|
],
|
||||||
|
"description": "<p>声明一个输入属性，以便我们可以通过属性绑定更新它。(比如：\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@Output() myEvent = new EventEmitter();",
|
||||||
|
"bold": [
|
||||||
|
"@Output()"
|
||||||
|
],
|
||||||
|
"description": "<p>声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：<code><my-cmp (my-event)="doSomething()"></code>)</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@HostBinding('[class.valid]') isValid;",
|
||||||
|
"bold": [
|
||||||
|
"@HostBinding('[class.valid]')"
|
||||||
|
],
|
||||||
|
"description": "<p>把宿主元素的属性（比如CSS类：valid）绑定到指令/组件的属性（比如：isValid）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
||||||
|
"bold": [
|
||||||
|
"@HostListener('click', ['$event'])"
|
||||||
|
],
|
||||||
|
"description": "<p>通过指令/组件的方法（例如onClick）订阅宿主元素的事件（例如click），可选传入一个参数（$event）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
||||||
|
"bold": [
|
||||||
|
"@ContentChild(myPredicate)"
|
||||||
|
],
|
||||||
|
"description": "<p>把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
||||||
|
"bold": [
|
||||||
|
"@ContentChildren(myPredicate)"
|
||||||
|
],
|
||||||
|
"description": "<p>把组件内容查询(MyPredicate)的全部结果，绑定到类的myChildComponents属性。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
||||||
|
"bold": [
|
||||||
|
"@ViewChild(myPredicate)"
|
||||||
|
],
|
||||||
|
"description": "<p>把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
||||||
|
"bold": [
|
||||||
|
"@ViewChildren(myPredicate)"
|
||||||
|
],
|
||||||
|
"description": "<p>把组件视图查询(myPredicate)的所有结果绑定到类的myChildComponents属性。对指令无效。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "指令和组件的变更检测与生命周期钩子",
|
||||||
|
"description": "<p>(作为类方法实现)\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "constructor(myService: MyService, ...) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"constructor(myService: MyService, ...)"
|
||||||
|
],
|
||||||
|
"description": "<p>类的构造函数会在所有其他生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngOnChanges(changeRecord)"
|
||||||
|
],
|
||||||
|
"description": "<p>在输入属性每次变化了之后、开始处理内容或子视图之前被调用。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngOnInit() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngOnInit()"
|
||||||
|
],
|
||||||
|
"description": "<p>在构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngDoCheck() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngDoCheck()"
|
||||||
|
],
|
||||||
|
"description": "<p>每当检查组件或指令的输入属性是否变化时调用。通过它，可以用自定义的检查方式来扩展变更检测逻辑。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngAfterContentInit() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngAfterContentInit()"
|
||||||
|
],
|
||||||
|
"description": "<p>当组件或指令的内容已经初始化、ngOnInit完成之后调用。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngAfterContentChecked() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngAfterContentChecked()"
|
||||||
|
],
|
||||||
|
"description": "<p>在每次检查完组件或指令的内容之后调用。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngAfterViewInit() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngAfterViewInit()"
|
||||||
|
],
|
||||||
|
"description": "<p>当组件的视图已经初始化完毕，每次ngAfterContentInit之后被调用。只适用于组件。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngAfterViewChecked() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngAfterViewChecked()"
|
||||||
|
],
|
||||||
|
"description": "<p>每次检查完组件的视图之后调用。只适用于组件。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "ngOnDestroy() { ... }",
|
||||||
|
"bold": [
|
||||||
|
"ngOnDestroy()"
|
||||||
|
],
|
||||||
|
"description": "<p>在所属实例被销毁前，只调用一次。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "依赖注入配置",
|
||||||
|
"description": "<p><code>import {provide} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"syntax": "provide(MyService, {useClass: MyMockService})",
|
||||||
|
"bold": [
|
||||||
|
"provide",
|
||||||
|
"useClass"
|
||||||
|
],
|
||||||
|
"description": "<p>把MyService类的Provider设置或改写为MyMockService。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "provide(MyService, {useFactory: myFactory})",
|
||||||
|
"bold": [
|
||||||
|
"provide",
|
||||||
|
"useFactory"
|
||||||
|
],
|
||||||
|
"description": "<p>把MyService的Provider设置或改写为myFactory工厂函数。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "provide(MyValue, {useValue: 41})",
|
||||||
|
"bold": [
|
||||||
|
"provide",
|
||||||
|
"useValue"
|
||||||
|
],
|
||||||
|
"description": "<p>把MyValue的Provider设置或改写为值41。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "路由与导航",
|
||||||
|
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n\n</p>\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": "<p>为所装饰的组件配置路由。支持静态、参数化、带通配符的路由。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<router-outlet></router-outlet>",
|
||||||
|
"bold": [
|
||||||
|
"router-outlet"
|
||||||
|
],
|
||||||
|
"description": "<p>标记一个位置，用于加载当前激活路由的组件。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
||||||
|
"bold": [
|
||||||
|
"[routerLink]"
|
||||||
|
],
|
||||||
|
"description": "<p>基于路由指令创建指向不同视图的链接，由路由名和可选参数组成。路由名匹配一个已配置路由的name属性。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
||||||
|
"bold": [
|
||||||
|
"@CanActivate"
|
||||||
|
],
|
||||||
|
"description": "<p>用函数定义的一个组件装饰器，路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺（Promise）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerOnActivate"
|
||||||
|
],
|
||||||
|
"description": "<p>导航到一个组件之后，路由器调用该组件的routerOnActivate方法（如已定义）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerCanReuse"
|
||||||
|
],
|
||||||
|
"description": "<p>路由器调用组件的routerCanReuse方法（如已定义）来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺（Promise）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerOnReuse"
|
||||||
|
],
|
||||||
|
"description": "<p>当路由器可以复用一个组件实例时，它调用组件的routerOnReuse方法（如已定义）。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerCanDeactivate"
|
||||||
|
],
|
||||||
|
"description": "<p>路由器会调用要完成导航所需移除的每个组件的routerCanDeactivate方法（如已定义）。当且仅当所有的该方法都返回true或者承诺（Promise）被解析（Resolve）时，导航才会继续。</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerOnDeactivate"
|
||||||
|
],
|
||||||
|
"description": "<p>在每个指令因为路由变更而被移除之前调用。可以返回一个承诺，来阻止移除本指令 —— 直到承诺（Promise）被解析（Resolve）。</p>\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"index": 10
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
:marked
|
||||||
|
## 关于中文版
|
||||||
|
这是一份跟官方网站保持 **同步更新** 的中文版。虽然保持同步是很累的，不过为了防止过时的内容误导读者，这份额外的付出还是很值得的。
|
||||||
|
我们全文采用意译的方式，在彻底理解作者意思的前提下用中文重新表述，力求做到“信雅达”。
|
||||||
|
|
||||||
|
当然，即便如此，我们会错意的可能性也还是有的，所以我们的译稿都提供了中英文对照，如果你对某些含义有疑问，可以看一下对应的英文版内容。
|
||||||
|
|
||||||
|
本文档目前只完成了初译，尚未进行审校和统稿，因此语言风格和表达上可能还有问题，欢迎到我们的[github]()上提出issue。
|
||||||
|
|
||||||
|
本文档遵循 C.C. 授权方式，你不用知会我们就可以转载，但是必须保证 **不做任何修改** 。
|
||||||
|
## 关于译者
|
||||||
|
本文档有两位译者，他们是多年的好友。这次利用业余时间联手翻译，就是因为看好Angular 2的前景，希望帮助大家在这项技术上能跟国外同步前进。
|
||||||
|
### 汪志成（雪狼）
|
||||||
|
《AngularJS深度剖析与最佳实践》的作者之一，ThoughtWorks高级咨询师。他从1998年开始做商业软件开发，拥有超过18年的从业经验，至今仍热衷于编程。
|
||||||
|
|
||||||
|
虽然一直在做编程工作，不过他最热衷的却是国学，特别是儒学与诗词。孟子曰：“得天下英才而教育之，三乐也”，力求践行之。
|
||||||
|
### 叶志敏
|
||||||
|
早期翻译软件《东方快车》的产品经理，至今已在英国留学和生活了十年。有多年在养老院工作的经历，他正在用Angular 2与.net开发一个养老院管理系统。
|
||||||
|
|
||||||
|
## 支持我们
|
||||||
|
由于我们对翻译质量的极端要求，所以很抱歉，我们暂时无法接受新人参与，否则我们需要花费大量精力去review。
|
||||||
|
|
||||||
|
你可以精神上支持我们：提供反馈意见、纠错、帮我们宣传等等。
|
||||||
Loading…
Reference in New Issue