更新了cheatsheet

翻译了一部分FAQ
This commit is contained in:
Zhicheng Wang 2016-09-14 21:12:14 +08:00
parent f5a154e012
commit 551f3dd51a
2 changed files with 252 additions and 76 deletions

View File

@ -4,59 +4,119 @@ block includes
:marked :marked
# FAQs # FAQs
# 常见问题FAQ
**Angular Modules** help organize an application into cohesive blocks of functionality. **Angular Modules** help organize an application into cohesive blocks of functionality.
**Angular模块**可以帮我们把应用组织成一些紧密相关的代码块。
The [Angular Modules chapter](../guide/ngmodule.html) covers the concepts and takes you step by step The [Angular Modules chapter](../guide/ngmodule.html) covers the concepts and takes you step by step
from the most elementary `@NgModule` to a multi-faceted sample with lazy loaded modules. from the most elementary `@NgModule` to a multi-faceted sample with lazy loaded modules.
[Angular模块](../guide/ngmodule.html)页面涵盖了此概念,并带你一步步的从最基本的`@NgModule`到包罗万象的延迟加载模块。
_This_ chapter answers the questions many developers ask about Angular Module design and implementation. _This_ chapter answers the questions many developers ask about Angular Module design and implementation.
*这里*回答的是开发者常问起的关于Angular模块设计与实现的问题。
.alert.is-important .alert.is-important
:marked :marked
These FAQs assume that you have already read the [Angular Module](../guide/ngmodule.html) chapter. These FAQs assume that you have already read the [Angular Module](../guide/ngmodule.html) chapter.
本FAQ假设你已经读完了[Angular模块](../guide/ngmodule.html)页。
:marked :marked
Declarations Declarations
声明
* [What classes should I add to _declarations_?](#q-what-to-declare) * [What classes should I add to _declarations_?](#q-what-to-declare)
* [我应该把哪些类加到_declarations_中](#q-what-to-declare)
* [What is a _declarable_?](#q-declarable) * [What is a _declarable_?](#q-declarable)
* [什么是*可声明的*](#q-declarable)
* [What classes should I *not* add to _declarations_?](#q-what-not-to-declare) * [What classes should I *not* add to _declarations_?](#q-what-not-to-declare)
* [我*不应该*把哪些类加到_declarations_中](#q-what-not-to-declare)
* [Why list the same component in multiple _NgModule_ properties?](#q-why-multiple-mentions) * [Why list the same component in multiple _NgModule_ properties?](#q-why-multiple-mentions)
* [为什么要把同一个组件列在*NgModule*的不同属性中?](#q-why-multiple-mentions)
* [What does "_Can't bind to 'x' since it isn't a known property of 'y'_" mean?](#q-why-cant-bind-to) * [What does "_Can't bind to 'x' since it isn't a known property of 'y'_" mean?](#q-why-cant-bind-to)
* ["_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思?](#q-why-cant-bind-to)
Imports Imports
导入
* [What should I import?](#q-what-to-import) * [What should I import?](#q-what-to-import)
* [我应该导入什么?](#q-what-to-import)
* [Should I import _BrowserModule_ or _CommonModule_?](#q-browser-vs-common-module) * [Should I import _BrowserModule_ or _CommonModule_?](#q-browser-vs-common-module)
* [我应该导入_BrowserModule_还是_CommonModule_](#q-browser-vs-common-module)
* [What if I import the same module twice?](#q-reimport) * [What if I import the same module twice?](#q-reimport)
* [如果我两次导入多一个模块会怎么样?](#q-reimport)
Exports Exports
导出
* [What should I export?](#q-what-to-export) * [What should I export?](#q-what-to-export)
* [我应该导出什么?](#q-what-to-export)
* [What should I *not* export?](#q-what-not-to-export) * [What should I *not* export?](#q-what-not-to-export)
* [我*不*应该导出什么?](#q-what-not-to-export)
* [Can I re-export imported classes and modules?](#q-re-export) * [Can I re-export imported classes and modules?](#q-re-export)
* [我能重新导出re-export所导入的类和模块吗](#q-re-export)
* [What is the _forRoot_ method?](#q-for-root) * [What is the _forRoot_ method?](#q-for-root)
* [_forRoot_方法是什么](#q-for-root)
Service Providers Service Providers
服务提供商
* [Why is a service provided in a feature module visible everywhere?](#q-module-provider-visibility) * [Why is a service provided in a feature module visible everywhere?](#q-module-provider-visibility)
* [为什么特性模块中提供的服务是到处可见的?](#q-module-provider-visibility)
* [Why is a service provided in a _lazy loaded_ module visible only to that module?](#q-lazy-loaded-module-provider-visibility) * [Why is a service provided in a _lazy loaded_ module visible only to that module?](#q-lazy-loaded-module-provider-visibility)
* [为什么*延迟加载*模块中的服务提供商只对那个模块本身可见?](#q-lazy-loaded-module-provider-visibility)
* [What if two modules provide the _same_ service?](#q-module-provider-duplicates) * [What if two modules provide the _same_ service?](#q-module-provider-duplicates)
* [如果两个模块提供了*同一个*服务会怎样?](#q-module-provider-duplicates)
* [How do I restrict service scope to a module?](#q-component-scoped-providers) * [How do I restrict service scope to a module?](#q-component-scoped-providers)
* [该如何把服务的范围限制在某个模块中?](#q-component-scoped-providers)
* [Should I add app-wide providers to the root _AppModule_ or the root _AppComponent_?](#q-root-component-or-module) * [Should I add app-wide providers to the root _AppModule_ or the root _AppComponent_?](#q-root-component-or-module)
* [我该把全应用级的提供商添加到根模块*AppModule*还是根组件*AppComponent*](#q-root-component-or-module)
* [Should I add other providers to a module or a component?](#q-component-or-module) * [Should I add other providers to a module or a component?](#q-component-or-module)
* [我该把其它提供商添加到模块中还是组件中?](#q-component-or-module)
* [Why is it bad if _SharedModule_ provides a service to a lazy loaded module?](#q-why-bad) * [Why is it bad if _SharedModule_ provides a service to a lazy loaded module?](#q-why-bad)
* [为什么让*SharedModule*为延迟加载模块提供服务是个馊主意?](#q-why-bad)
* [Why does lazy loading create a child injector?](#q-why-child-injector) * [Why does lazy loading create a child injector?](#q-why-child-injector)
* [为什么延迟加载模块要创建一个子注入器?](#q-why-child-injector)
* [How can I tell if a module or service was previously loaded?](#q-is-it-loaded) * [How can I tell if a module or service was previously loaded?](#q-is-it-loaded)
* [我要怎样才能知道一个模块或服务已经被加载过?](#q-is-it-loaded)
Entry Components Entry Components
入口组件
* [What is an _entry component_?](#q-entry-component-defined) * [What is an _entry component_?](#q-entry-component-defined)
* [什么是*入口组件*](#q-entry-component-defined)
* [What is the difference between a _bootstrap_ component and an _entry component_?](#q-bootstrap_vs_entry_component) * [What is the difference between a _bootstrap_ component and an _entry component_?](#q-bootstrap_vs_entry_component)
* [在*引导*组件和*入口*组件之间有什么不同?](#q-bootstrap_vs_entry_component)
* [When do I add components to _entryComponents_?](#q-when-entry-components) * [When do I add components to _entryComponents_?](#q-when-entry-components)
* [什么情况下我该把组件添加到*entryComponent*中?](#q-when-entry-components)
* [Why does Angular need _entryComponents_?](#q-why-entry-components) * [Why does Angular need _entryComponents_?](#q-why-entry-components)
* [为什么Angular会需要_entryComponents_](#q-why-entry-components)
General General
一般问题
* [What kinds of modules should I have and how should I use them?](#q-module-recommendations) * [What kinds of modules should I have and how should I use them?](#q-module-recommendations)
* [我需要哪些类型的模块?我该如何使用它们?](#q-module-recommendations)
* [What's the difference between Angular and JavaScript Modules?](#q-ng-vs-js-modules) * [What's the difference between Angular and JavaScript Modules?](#q-ng-vs-js-modules)
* [在Angular模块和JavaScript模块之间有什么不同](#q-ng-vs-js-modules)
* [What is a "template reference"?](#q-template-reference) * [What is a "template reference"?](#q-template-reference)
* [什么是“模板引用”?](#q-template-reference)
* [How does Angular find components, directives, and pipes in a template?](#q-template-reference) * [How does Angular find components, directives, and pipes in a template?](#q-template-reference)
* [Angular如何是在模板中查找组件、指令和管道的](#q-template-reference)
* [What is the Angular Compiler?](#q-angular-compiler) * [What is the Angular Compiler?](#q-angular-compiler)
* [什么是Angular编译器Compiler](#q-angular-compiler)
* [Can you summarize the _NgModule_ API?](#q-ngmodule-api) * [Can you summarize the _NgModule_ API?](#q-ngmodule-api)
* [你能总结一下_NgModule_ API吗](#q-ngmodule-api)
.l-hr .l-hr
@ -65,11 +125,18 @@ a#q-what-to-declare
:marked :marked
### What classes should I add to _declarations_? ### What classes should I add to _declarations_?
### 我该把哪些类加到*declarations*中?
Add [declarable](#q-declarable) classes — components, directives, and pipes — to a `declarations` list. Add [declarable](#q-declarable) classes — components, directives, and pipes — to a `declarations` list.
把[可声明](#q-declarable)的类(组件、指令和管道)添加到`declarations`列表中。
These classes must be declared in _exactly one_ module of the application. These classes must be declared in _exactly one_ module of the application.
Declare them in _this_ module if they _belong_ to this module. Declare them in _this_ module if they _belong_ to this module.
这些类只能声明在应用程序的*一个*模块中。
只有当它们*从属于*某个个模块时,才能把它声明在*此*模块中。
.l-hr .l-hr
a#q-declarable a#q-declarable
@ -77,10 +144,14 @@ a#q-declarable
:marked :marked
### What is a _declarable_? ### What is a _declarable_?
### 什么是*可声明的*
_Declarables_ are the class types — components, directives, and pipes — _Declarables_ are the class types — components, directives, and pipes —
that you can add to a module's `declarations` list. that you can add to a module's `declarations` list.
They're the _only_ classes that you can add to `declarations`. They're the _only_ classes that you can add to `declarations`.
*可声明的*就是组件、指令和管道等可以被加到模块的`declarations`列表中的类。它们也是*仅有的*能被加到`declarations`中的类。
.l-hr .l-hr
a#q-what-not-to-declare a#q-what-not-to-declare
@ -88,21 +159,39 @@ a#q-what-not-to-declare
:marked :marked
### What classes should I _not_ add to _declarations_? ### What classes should I _not_ add to _declarations_?
### 哪些类*不*应该加到`declarations`中?
Only [declarable](#q-declarable) classes can be added to a module's `declarations` list. Only [declarable](#q-declarable) classes can be added to a module's `declarations` list.
只有[可声明的](#q-declarable)类才能加到模块的`declarations`列表中。
Do *not* declare Do *not* declare
*不要*声明:
* a class that is already declared in another module, whether an app module, @angular module, or 3rd party module * a class that is already declared in another module, whether an app module, @angular module, or 3rd party module
* 已经被其它模块声明过的类,无论是在应用模块、@angular模块还是第三方模块中。
* an array of directives imported from another module. * an array of directives imported from another module.
For example, do not declare FORMS_DIRECTIVES from `@angular/forms`. For example, do not declare FORMS_DIRECTIVES from `@angular/forms`.
* 一组从其它模块中导入的指令。
例如,不要声明来自`@angular/forms`的FORMS_DIRECTIVES。
* module classes * module classes
* 模块类
* service classes * service classes
* 服务类
* non-Angular classes and objects such as * non-Angular classes and objects such as
strings, numbers, functions, entity models, configurations, business logic, and helper classes. strings, numbers, functions, entity models, configurations, business logic, and helper classes.
* 非Angular的类和对象比如字符串、数字、函数、实体模型、配置、业务逻辑和辅助类。
.l-hr .l-hr
a#q-why-multiple-mentions a#q-why-multiple-mentions
@ -110,16 +199,27 @@ a#q-why-multiple-mentions
:marked :marked
### Why list the same component in multiple _NgModule_ properties? ### Why list the same component in multiple _NgModule_ properties?
### 为什么要把同一个组件声明在不同的*NgModule*属性中?
We often see `AppComponent` listed in both `declarations` and `bootstrap`. We often see `AppComponent` listed in both `declarations` and `bootstrap`.
We might see `HeroComponent` listed in `declarations`, `exports`, and `entryComponents`. We might see `HeroComponent` listed in `declarations`, `exports`, and `entryComponents`.
我们经常看到`AppComponent`被同时列在`declarations`和`bootstrap`中。
我们还可能看到`HeroComponent`被同时列在`declarations`、`exports`和`entryComponent`中。
That _feels_ redundant but these properties have different functions That _feels_ redundant but these properties have different functions
and we can't infer that membership in one list implies membership in another list. and we can't infer that membership in one list implies membership in another list.
这*看起来*是多余的,不过这些函数具有不同的功能,我们无法从它出现在一个列表中推断出它也应该在另一个列表中。
* `AppComponent` could be declared in this module but not bootstrapped. * `AppComponent` could be declared in this module but not bootstrapped.
* `AppComponent`可能被声明在此模块中,但可能不是引导组件。
* `AppComponent` could be bootstrapped in this module but declared in a different feature module. * `AppComponent` could be bootstrapped in this module but declared in a different feature module.
* `AppComponent`可能在此模块中引导,但可能是由另一个特性模块声明的。
* `HeroComponent` could be imported from another app module (so we can't declare it) and re-exported by this module. * `HeroComponent` could be imported from another app module (so we can't declare it) and re-exported by this module.
* `HeroComponent`可能是从另一个应用模块中导入的(所以我们没法声明它)并且被当前模块重新导出。
* `HeroComponent` could be exported for inclusion in an external component's template and also dynamically loaded in a pop-up dialog. * `HeroComponent` could be exported for inclusion in an external component's template and also dynamically loaded in a pop-up dialog.
* `HeroComponent`可能被导入,以便用在外部组件的模板中,但也可能同时被一个弹出式对话框加载。
.l-hr .l-hr
@ -128,14 +228,23 @@ a#q-why-cant-bind-to
:marked :marked
### What does "_Can't bind to 'x' since it isn't a known property of 'y'_" mean? ### What does "_Can't bind to 'x' since it isn't a known property of 'y'_" mean?
### "_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思?
This error usually means either that you neglected to declare the directive "x" This error usually means either that you neglected to declare the directive "x"
or you haven't imported the module to which "x" belongs. or you haven't imported the module to which "x" belongs.
这个错误通常意味着你或者忘了声明指令“x”或者你没有导入“x”所属的模块。
For example, if "x" is `ngModel`, you probably haven't imported the `FormsModule` from `@angular/forms`. For example, if "x" is `ngModel`, you probably haven't imported the `FormsModule` from `@angular/forms`.
比如如果这个“x”是`ngModel`,你可能忘了从`@angular/forms`中导入`FormsModule`。
Perhaps you declared "x" in an application sub-module but forgot to export it? Perhaps you declared "x" in an application sub-module but forgot to export it?
The "x" class won't be visible to other modules until you add it to the `exports` list. The "x" class won't be visible to other modules until you add it to the `exports` list.
也可能你在该应用的子模块中声明了“x”但是忘了从那个模块导出它。
除非你把这个“x”类加入了`exports`列表中,否则它对其它模块将是不可见的。
.l-hr .l-hr
a#q-what-to-import a#q-what-to-import
@ -143,6 +252,8 @@ a#q-what-to-import
:marked :marked
### What should I import? ### What should I import?
### 我该导入什么?
Import modules whose public (exported) [declarable classes](#q-declarable) Import modules whose public (exported) [declarable classes](#q-declarable)
you need to reference in this module's component templates. you need to reference in this module's component templates.

View File

@ -1,36 +1,85 @@
{ {
"currentEnvironment": "TypeScript", "currentEnvironment": "TypeScript",
"version": { "version": {
"raw": "2.0.0-rc.1", "raw": "2.0.0-rc.5",
"major": 2, "major": 2,
"minor": 0, "minor": 0,
"patch": 0, "patch": 0,
"prerelease": [ "prerelease": [
"local" "local"
], ],
"build": "sha.89c197a", "build": "sha.8c6f6c1",
"version": "2.0.0-local", "version": "2.0.0-local",
"codeName": "snapshot", "codeName": "snapshot",
"isSnapshot": true, "isSnapshot": true,
"full": "2.0.0-local+sha.89c197a", "full": "2.0.0-local+sha.8c6f6c1",
"branch": "master", "branch": "master",
"commitSHA": "89c197a385e2ff5aeb8c190ed20db1389f477b3b" "commitSHA": "8c6f6c173da20113d467e57fd4ee5ab06d0a056b"
}, },
"sections": [ "sections": [
{ {
"name": "引导", "name": "引导",
"description": "<p><code>import {bootstrap} from &#39;angular2/platform/browser&#39;;</code>\n\n</p>\n", "description": "<p><code>import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);", "syntax": "platformBrowserDynamic().bootstrapModule(MyAppModule);",
"bold": [ "bold": [
"provide" "platformBrowserDynamic().bootstrapModule"
], ],
"description": "<p>以MyAppComponent作为根组件引导应用并且配置DI的各种提供商。</p>\n" "description": "<p>使用JIT编译器引导一个AppModule模块定义的应用</p>\n"
} }
], ],
"index": 0 "index": 0
}, },
{
"name": "NgModules",
"description": "<p><code>import { NgModule } from &#39;@angular/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@NgModule({ declarations: ..., imports: ..., exports: ..., bootstrap: ...})\nclass MyModule {}",
"bold": [
"NgModule"
],
"description": "<p>定义一个模块,其中包括组件、指令、管道和提供商。</p>\n"
},
{
"syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
"bold": [
"declarations:"
],
"description": "<p>一个数组,包括从属于当前模块的组件、指令和管道。</p>\n"
},
{
"syntax": "imports: [BrowserModule, SomeOtherModule]",
"bold": [
"imports:"
],
"description": "<p>一个数组,包括被导入到当前模块中的所有模块。来自被导入模块的<code>declarations</code>也同样对当前模块有效。</p>\n"
},
{
"syntax": "exports: [MyRedComponent, MyDatePipe]",
"bold": [
"exports:"
],
"description": "<p>一个数组,包括对导入当前模块的模块可见的组件、指令、管道。</p>\n"
},
{
"syntax": "providers: [MyService, { provide: ... }]",
"bold": [
"providers:"
],
"description": "<p>一个数组,包括在对前模块及导入当前模块的模块中的内容物(组件、指令、管道、提供商等)可见的依赖注入提供商。</p>\n"
},
{
"syntax": "bootstrap: [MyAppComponent]",
"bold": [
"bootstrap:"
],
"description": "<p>一个数组,包括由当前模块引导时应该引导的组件</p>\n"
}
],
"index": 1
},
{ {
"name": "模板语法", "name": "模板语法",
"description": "", "description": "",
@ -75,7 +124,7 @@
"bold": [ "bold": [
"{{ponyName}}" "{{ponyName}}"
], ],
"description": "<p>把属性绑定到一个插值表达式字符串,比如 &quot;Hello Seabiscuit&quot;。它等价于:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n" "description": "<p>把属性绑定到一个插值表达式字符串,比如 &quot;Hello Seabiscuit&quot;。它等价于:\n<code>&lt;div [title]=&quot;&#39;Hello &#39; + ponyName&quot;&gt;</code></p>\n"
}, },
{ {
"syntax": "<p>Hello {{ponyName}}</p>", "syntax": "<p>Hello {{ponyName}}</p>",
@ -135,11 +184,11 @@
"description": "<p><code>&lt;svg&gt;</code>元素在无需前缀的情况下也能被自动检测为SVG。</p>\n" "description": "<p><code>&lt;svg&gt;</code>元素在无需前缀的情况下也能被自动检测为SVG。</p>\n"
} }
], ],
"index": 1 "index": 2
}, },
{ {
"name": "内指令", "name": "内指令",
"description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n\n</p>\n", "description": "<p><code>import { CommonModule } from &#39;@angular/common&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "<section *ngIf=\"showSection\">", "syntax": "<section *ngIf=\"showSection\">",
@ -156,11 +205,11 @@
"description": "<p>把li元素及其内容转化成一个模板并用它来为列表中的每个条目初始化视图。</p>\n" "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>", "syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchCase]=\"case1Exp\">...</template>\n <template ngSwitchCase=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
"bold": [ "bold": [
"[ngSwitch]", "[ngSwitch]",
"[ngSwitchWhen]", "[ngSwitchCase]",
"ngSwitchWhen", "ngSwitchCase",
"ngSwitchDefault" "ngSwitchDefault"
], ],
"description": "<p>基于conditionExpression的当前值从内嵌模板中选取一个有条件的切换div的内容。</p>\n" "description": "<p>基于conditionExpression的当前值从内嵌模板中选取一个有条件的切换div的内容。</p>\n"
@ -173,11 +222,11 @@
"description": "<p>把一个元素上CSS类的出现与否绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。</p>\n" "description": "<p>把一个元素上CSS类的出现与否绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。</p>\n"
} }
], ],
"index": 2 "index": 3
}, },
{ {
"name": "表单", "name": "表单",
"description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n\n</p>\n", "description": "<p><code>import { FormsModule } from &#39;@angular/forms&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "<input [(ngModel)]=\"userName\">", "syntax": "<input [(ngModel)]=\"userName\">",
@ -187,11 +236,11 @@
"description": "<p>提供双向绑定,为表单控件提供解析和验证。</p>\n" "description": "<p>提供双向绑定,为表单控件提供解析和验证。</p>\n"
} }
], ],
"index": 3 "index": 4
}, },
{ {
"name": "类装饰器", "name": "类装饰器",
"description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n\n</p>\n", "description": "<p><code>import { Directive, ... } from &#39;@angular/core&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "@Component({...})\nclass MyComponent() {}", "syntax": "@Component({...})\nclass MyComponent() {}",
@ -222,7 +271,7 @@
"description": "<p>声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。\n\n</p>\n" "description": "<p>声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。\n\n</p>\n"
} }
], ],
"index": 4 "index": 5
}, },
{ {
"name": "指令配置", "name": "指令配置",
@ -236,21 +285,28 @@
"description": "<p>指定一个CSS选择器以便在模板中找出该指令。支持的选择器包括<code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, 和 <code>:not()</code>。</p>\n<p>不支持父子关系选择器。</p>\n" "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(...)]", "syntax": "providers: [MyService, { provide: ... }]",
"bold": [ "bold": [
"providers:" "providers:"
], ],
"description": "<p>为当前指令及其子指令提供依赖注入的providers数组。</p>\n" "description": "<p>为当前指令及其子指令提供依赖注入的providers数组。</p>\n"
} }
], ],
"index": 5 "index": 6
}, },
{ {
"name": "组件配置", "name": "组件配置",
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n", "description": "<p>\n<code>@Component</code>扩展了<code>@Directive</code>,\n以便<code>@Directive</code>中的配置项也能用在组件上</p>\n",
"items": [ "items": [
{ {
"syntax": "viewProviders: [MyService, provide(...)]", "syntax": "moduleId: module.id",
"bold": [
"moduleId:"
],
"description": "<p>如果设置了,<code>templateUrl</code>和<code>styleUrl</code>会被解析成相对于组件的。</p>\n"
},
{
"syntax": "viewProviders: [MyService, { provide: ... }]",
"bold": [ "bold": [
"viewProviders:" "viewProviders:"
], ],
@ -271,27 +327,13 @@
"styleUrls:" "styleUrls:"
], ],
"description": "<p>内联CSS样式或外部样式表URL的列表用于给组件的视图添加样式。</p>\n" "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 "index": 7
}, },
{ {
"name": "供指令类或组件类用的字段装饰器。", "name": "供指令类或组件类用的字段装饰器。",
"description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n\n</p>\n", "description": "<p><code>import { Input, ... } from &#39;@angular/core&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "@Input() myProperty;", "syntax": "@Input() myProperty;",
@ -305,7 +347,7 @@
"bold": [ "bold": [
"@Output()" "@Output()"
], ],
"description": "<p>声明一个输出属性,以便我们可以通过事件绑定进行订阅。(比如:<code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>)</p>\n" "description": "<p>声明一个输出属性,以便我们可以通过事件绑定进行订阅。(比如:<code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
}, },
{ {
"syntax": "@HostBinding('[class.valid]') isValid;", "syntax": "@HostBinding('[class.valid]') isValid;",
@ -350,7 +392,7 @@
"description": "<p>把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。</p>\n" "description": "<p>把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。</p>\n"
} }
], ],
"index": 7 "index": 8
}, },
{ {
"name": "指令和组件的变更检测与生命周期钩子", "name": "指令和组件的变更检测与生命周期钩子",
@ -420,14 +462,14 @@
"description": "<p>在所属实例被销毁前,只调用一次。</p>\n" "description": "<p>在所属实例被销毁前,只调用一次。</p>\n"
} }
], ],
"index": 8 "index": 9
}, },
{ {
"name": "依赖注入配置", "name": "依赖注入配置",
"description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n\n</p>\n", "description": "<p></p>\n",
"items": [ "items": [
{ {
"syntax": "provide(MyService, {useClass: MyMockService})", "syntax": "{ provide: MyService, useClass: MyMockService }",
"bold": [ "bold": [
"provide", "provide",
"useClass" "useClass"
@ -435,7 +477,7 @@
"description": "<p>把MyService类的提供商设置或改写为MyMockService。</p>\n" "description": "<p>把MyService类的提供商设置或改写为MyMockService。</p>\n"
}, },
{ {
"syntax": "provide(MyService, {useFactory: myFactory})", "syntax": "{ provide: MyService, useFactory: myFactory }",
"bold": [ "bold": [
"provide", "provide",
"useFactory" "useFactory"
@ -443,7 +485,7 @@
"description": "<p>把MyService的提供商设置或改写为myFactory工厂函数。</p>\n" "description": "<p>把MyService的提供商设置或改写为myFactory工厂函数。</p>\n"
}, },
{ {
"syntax": "provide(MyValue, {useValue: 41})", "syntax": "{ provide: MyValue, useValue: 41 }",
"bold": [ "bold": [
"provide", "provide",
"useValue" "useValue"
@ -451,77 +493,100 @@
"description": "<p>把MyValue的提供商设置或改写为值41。</p>\n" "description": "<p>把MyValue的提供商设置或改写为值41。</p>\n"
} }
], ],
"index": 9 "index": 10
}, },
{ {
"name": "路由与导航", "name": "路由与导航",
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n\n</p>\n", "description": "<p><code>import { Routes, RouterModule, ... } from &#39;@angular/router&#39;;</code>\n\n</p>\n",
"items": [ "items": [
{ {
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, name: 'MyCmp' },\n { path: '/staticPath', component: ..., name: ...},\n { path: '/*wildCardParam', component: ..., name: ...}\n])\nclass MyComponent() {}", "syntax": "const routes: Routes = [\n { path: '', component: HomeComponent },\n { path: 'path/:routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nconst routing = RouterModule.forRoot(routes);",
"bold": [ "bold": [
"@RouteConfig" "Routes"
], ],
"description": "<p>为所装饰的组件配置路由。支持静态、参数化、带通配符的路由。</p>\n" "description": "<p>为应用配置路由。支持静态、参数化、重定向和通配符路由。还支持自定义路由数据和解析。</p>\n"
}, },
{ {
"syntax": "<router-outlet></router-outlet>", "syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
"bold": [ "bold": [
"router-outlet" "router-outlet"
], ],
"description": "<p>标记一个位置,用于加载当前激活路由的组件。</p>\n" "description": "<p>标记一个位置,用于加载当前激活路由的组件。</p>\n"
}, },
{ {
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">", "syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
"bold": [ "bold": [
"[routerLink]" "[routerLink]"
], ],
"description": "<p>基于路由指令创建指向不同视图的链接,由路由名和可选参数组成。路由名匹配一个已配置路由的name属性。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。</p>\n" "description": "<p>基于路由指令创建指向不同视图的链接,由路由路径、必选参数、可选参数、查询参数和片段fragment组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。添加“../sibling”前缀可以导航到兄弟路由或父路由。</p>\n"
}, },
{ {
"syntax": "@CanActivate(() => { ... })class MyComponent() {}", "syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
"bold": [ "bold": [],
"@CanActivate" "description": "<p>The provided class(es) will be added to the element when the routerLink becomes the current active route.</p>\n"
],
"description": "<p>用函数定义的一个组件装饰器,路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺(Promise)。</p>\n"
}, },
{ {
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }", "syntax": "class CanActivateGuard implements CanActivate {\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
"bold": [ "bold": [
"routerOnActivate" "CanActivate"
], ],
"description": "<p>导航到一个组件之后路由器调用该组件的routerOnActivate方法(如已定义)。</p>\n" "description": "<p>一个用来定义类的接口,路由器会首先调用它来决定是否应该激活该组件。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。</p>\n"
}, },
{ {
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }", "syntax": "class CanDeactivateGuard implements CanDeactivate<T> {\n canDeactivate(\n component: T,\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
"bold": [ "bold": [
"routerCanReuse" "CanDeactivate"
], ],
"description": "<p>路由器调用组件的routerCanReuse方法(如已定义)来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺(Promise)。</p>\n" "description": "<p>一个用来定义类的接口,路由器在导航后会首先调用它来决定是否应该取消该组件的激活状态。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。</p>\n"
}, },
{ {
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }", "syntax": "class CanActivateChildGuard implements CanActivateChild {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard], children: ... }",
"bold": [ "bold": [
"routerOnReuse" "CanActivateChild"
], ],
"description": "<p>当路由器发现可以复用一个组件实例时它调用组件的routerOnReuse方法(如已定义)。</p>\n" "description": "<p>一个用来定义类的接口,路由器会首先调用它来决定是否应该激活该子路由。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。\n"
}, },
{ {
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }", "syntax": "class ResolveGuard implements Resolve<T> {\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<any>|Promise<any>|any { ... }\n}\n\n{ path: ..., resolve: [ResolveGuard] }",
"bold": [ "bold": [
"routerCanDeactivate" "Resolve"
], ],
"description": "<p>路由器会调用如果要完成导航就得移除的每个组件的routerCanDeactivate方法(如已定义)。当且仅当所有的该方法都返回true或者承诺(Promise)被解决时,导航才会继续。</p>\n" "description": "<p>一个用来定义类的接口,路由器会在渲染该路由之前先调用它来解析路由数据。应该返回一个值或能解析为值的可观察对象(Observable)或承诺(Promise)。</p>\n"
}, },
{ {
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }", "syntax": "class CanLoadGuard implements CanLoad {\n canLoad(\n route: Route\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
"bold": [ "bold": [
"routerOnDeactivate" "CanLoad"
], ],
"description": "<p>在每个指令因为路由变更而被移除之前调用。可以返回一个承诺,来阻止移除本指令 —— 直到承诺(Promise)被解决。</p>\n" "description": "<p>一个用来定义类的接口,路由器会首先调用它来决定一个延迟加载的模块是否应该被加载。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。</p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p>.</p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
},
{
"syntax": "",
"bold": [],
"description": "<p></p>\n"
} }
], ],
"index": 10 "index": 11
} }
] ]
} }