Zhicheng Wang
parent
f5a154e012
commit
551f3dd51a
|
|
@ -4,59 +4,119 @@ block includes
|
|||
:marked
|
||||
# FAQs
|
||||
|
||||
# 常见问题（FAQ）
|
||||
|
||||
**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
|
||||
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.
|
||||
|
||||
*这里*回答的是开发者常问起的关于Angular模块设计与实现的问题。
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
These FAQs assume that you have already read the [Angular Module](../guide/ngmodule.html) chapter.
|
||||
|
||||
本FAQ假设你已经读完了[Angular模块](../guide/ngmodule.html)页。
|
||||
|
||||
:marked
|
||||
Declarations
|
||||
|
||||
声明
|
||||
|
||||
* [What classes should I add to _declarations_?](#q-what-to-declare)
|
||||
* [我应该把哪些类加到_declarations_中？](#q-what-to-declare)
|
||||
* [What is a _declarable_?](#q-declarable)
|
||||
* [什么是*可声明的*？](#q-declarable)
|
||||
* [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)
|
||||
* [为什么要把同一个组件列在*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)
|
||||
* ["_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思？](#q-why-cant-bind-to)
|
||||
|
||||
Imports
|
||||
|
||||
导入
|
||||
|
||||
* [What should I import?](#q-what-to-import)
|
||||
* [我应该导入什么？](#q-what-to-import)
|
||||
* [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)
|
||||
* [如果我两次导入多一个模块会怎么样？](#q-reimport)
|
||||
|
||||
Exports
|
||||
|
||||
导出
|
||||
|
||||
* [What should I export?](#q-what-to-export)
|
||||
* [我应该导出什么？](#q-what-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)
|
||||
* [我能重新导出（re-export）所导入的类和模块吗？](#q-re-export)
|
||||
* [What is the _forRoot_ method?](#q-for-root)
|
||||
* [_forRoot_方法是什么？](#q-for-root)
|
||||
|
||||
Service Providers
|
||||
|
||||
服务提供商
|
||||
|
||||
* [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)
|
||||
* [为什么*延迟加载*模块中的服务提供商只对那个模块本身可见？](#q-lazy-loaded-module-provider-visibility)
|
||||
* [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)
|
||||
* [该如何把服务的范围限制在某个模块中？](#q-component-scoped-providers)
|
||||
* [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)
|
||||
* [我该把其它提供商添加到模块中还是组件中？](#q-component-or-module)
|
||||
* [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)
|
||||
* [为什么延迟加载模块要创建一个子注入器？](#q-why-child-injector)
|
||||
* [How can I tell if a module or service was previously loaded?](#q-is-it-loaded)
|
||||
* [我要怎样才能知道一个模块或服务已经被加载过？](#q-is-it-loaded)
|
||||
|
||||
Entry Components
|
||||
|
||||
入口组件
|
||||
|
||||
* [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)
|
||||
* [在*引导*组件和*入口*组件之间有什么不同？](#q-bootstrap_vs_entry_component)
|
||||
* [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)
|
||||
* [为什么Angular会需要_entryComponents_？](#q-why-entry-components)
|
||||
|
||||
General
|
||||
|
||||
一般问题
|
||||
|
||||
* [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)
|
||||
* [在Angular模块和JavaScript模块之间有什么不同？](#q-ng-vs-js-modules)
|
||||
* [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)
|
||||
* [Angular如何是在模板中查找组件、指令和管道的？](#q-template-reference)
|
||||
* [What is the Angular Compiler?](#q-angular-compiler)
|
||||
* [什么是Angular编译器（Compiler）？](#q-angular-compiler)
|
||||
* [Can you summarize the _NgModule_ API?](#q-ngmodule-api)
|
||||
* [你能总结一下_NgModule_ API吗？](#q-ngmodule-api)
|
||||
|
||||
.l-hr
|
||||
|
||||
|
|
@ -65,11 +125,18 @@ a#q-what-to-declare
|
|||
:marked
|
||||
### What classes should I add to _declarations_?
|
||||
|
||||
### 我该把哪些类加到*declarations*中？
|
||||
|
||||
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.
|
||||
Declare them in _this_ module if they _belong_ to this module.
|
||||
|
||||
这些类只能声明在应用程序的*一个*模块中。
|
||||
只有当它们*从属于*某个个模块时，才能把它声明在*此*模块中。
|
||||
|
||||
.l-hr
|
||||
|
||||
a#q-declarable
|
||||
|
|
@ -77,10 +144,14 @@ a#q-declarable
|
|||
:marked
|
||||
### What is a _declarable_?
|
||||
|
||||
### 什么是*可声明的*？
|
||||
|
||||
_Declarables_ are the class types — components, directives, and pipes —
|
||||
that you can add to a module's `declarations` list.
|
||||
They're the _only_ classes that you can add to `declarations`.
|
||||
|
||||
*可声明的*就是组件、指令和管道等可以被加到模块的`declarations`列表中的类。它们也是*仅有的*能被加到`declarations`中的类。
|
||||
|
||||
.l-hr
|
||||
|
||||
a#q-what-not-to-declare
|
||||
|
|
@ -88,21 +159,39 @@ a#q-what-not-to-declare
|
|||
:marked
|
||||
### What classes should I _not_ add to _declarations_?
|
||||
|
||||
### 哪些类*不*应该加到`declarations`中？
|
||||
|
||||
Only [declarable](#q-declarable) classes can be added to a module's `declarations` list.
|
||||
|
||||
只有[可声明的](#q-declarable)类才能加到模块的`declarations`列表中。
|
||||
|
||||
Do *not* declare
|
||||
|
||||
*不要*声明：
|
||||
|
||||
* 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.
|
||||
For example, do not declare FORMS_DIRECTIVES from `@angular/forms`.
|
||||
|
||||
* 一组从其它模块中导入的指令。
|
||||
例如，不要声明来自`@angular/forms`的FORMS_DIRECTIVES。
|
||||
|
||||
* module classes
|
||||
|
||||
* 模块类
|
||||
|
||||
* service classes
|
||||
|
||||
* 服务类
|
||||
|
||||
* non-Angular classes and objects such as
|
||||
strings, numbers, functions, entity models, configurations, business logic, and helper classes.
|
||||
|
||||
* 非Angular的类和对象，比如：字符串、数字、函数、实体模型、配置、业务逻辑和辅助类。
|
||||
|
||||
.l-hr
|
||||
|
||||
a#q-why-multiple-mentions
|
||||
|
|
@ -110,16 +199,27 @@ a#q-why-multiple-mentions
|
|||
:marked
|
||||
### Why list the same component in multiple _NgModule_ properties?
|
||||
|
||||
### 为什么要把同一个组件声明在不同的*NgModule*属性中？
|
||||
|
||||
We often see `AppComponent` listed in both `declarations` and `bootstrap`.
|
||||
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
|
||||
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`可能被声明在此模块中，但可能不是引导组件。
|
||||
* `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`可能是从另一个应用模块中导入的（所以我们没法声明它）并且被当前模块重新导出。
|
||||
* `HeroComponent` could be exported for inclusion in an external component's template and also dynamically loaded in a pop-up dialog.
|
||||
* `HeroComponent`可能被导入，以便用在外部组件的模板中，但也可能同时被一个弹出式对话框加载。
|
||||
|
||||
.l-hr
|
||||
|
||||
|
|
@ -128,14 +228,23 @@ a#q-why-cant-bind-to
|
|||
:marked
|
||||
### 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"
|
||||
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`.
|
||||
|
||||
比如，如果这个“x”是`ngModel`，你可能忘了从`@angular/forms`中导入`FormsModule`。
|
||||
|
||||
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.
|
||||
|
||||
也可能你在该应用的子模块中声明了“x”，但是忘了从那个模块导出它。
|
||||
除非你把这个“x”类加入了`exports`列表中，否则它对其它模块将是不可见的。
|
||||
|
||||
.l-hr
|
||||
|
||||
a#q-what-to-import
|
||||
|
|
@ -143,6 +252,8 @@ a#q-what-to-import
|
|||
:marked
|
||||
### What should I import?
|
||||
|
||||
### 我该导入什么？
|
||||
|
||||
Import modules whose public (exported) [declarable classes](#q-declarable)
|
||||
you need to reference in this module's component templates.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,85 @@
|
|||
{
|
||||
"currentEnvironment": "TypeScript",
|
||||
"version": {
|
||||
"raw": "2.0.0-rc.1",
|
||||
"raw": "2.0.0-rc.5",
|
||||
"major": 2,
|
||||
"minor": 0,
|
||||
"patch": 0,
|
||||
"prerelease": [
|
||||
"local"
|
||||
],
|
||||
"build": "sha.89c197a",
|
||||
"build": "sha.8c6f6c1",
|
||||
"version": "2.0.0-local",
|
||||
"codeName": "snapshot",
|
||||
"isSnapshot": true,
|
||||
"full": "2.0.0-local+sha.89c197a",
|
||||
"full": "2.0.0-local+sha.8c6f6c1",
|
||||
"branch": "master",
|
||||
"commitSHA": "89c197a385e2ff5aeb8c190ed20db1389f477b3b"
|
||||
"commitSHA": "8c6f6c173da20113d467e57fd4ee5ab06d0a056b"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "引导",
|
||||
"description": "<p><code>import {bootstrap} from 'angular2/platform/browser';</code>\n\n</p>\n",
|
||||
"description": "<p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
||||
"syntax": "platformBrowserDynamic().bootstrapModule(MyAppModule);",
|
||||
"bold": [
|
||||
"provide"
|
||||
"platformBrowserDynamic().bootstrapModule"
|
||||
],
|
||||
"description": "<p>以MyAppComponent作为根组件引导应用，并且配置DI的各种提供商。</p>\n"
|
||||
"description": "<p>使用JIT编译器引导一个AppModule模块定义的应用</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"name": "NgModules",
|
||||
"description": "<p><code>import { NgModule } from '@angular/core';</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": "模板语法",
|
||||
"description": "",
|
||||
|
|
@ -75,7 +124,7 @@
|
|||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit"。它等价于：\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||
"description": "<p>把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit"。它等价于：\n<code><div [title]="'Hello ' + ponyName"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||
|
|
@ -135,11 +184,11 @@
|
|||
"description": "<p><code><svg></code>元素在无需前缀的情况下，也能被自动检测为SVG。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 1
|
||||
"index": 2
|
||||
},
|
||||
{
|
||||
"name": "内建指令",
|
||||
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n\n</p>\n",
|
||||
"name": "内置指令",
|
||||
"description": "<p><code>import { CommonModule } from '@angular/common';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<section *ngIf=\"showSection\">",
|
||||
|
|
@ -156,11 +205,11 @@
|
|||
"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": [
|
||||
"[ngSwitch]",
|
||||
"[ngSwitchWhen]",
|
||||
"ngSwitchWhen",
|
||||
"[ngSwitchCase]",
|
||||
"ngSwitchCase",
|
||||
"ngSwitchDefault"
|
||||
],
|
||||
"description": "<p>基于conditionExpression的当前值，从内嵌模板中选取一个，有条件的切换div的内容。</p>\n"
|
||||
|
|
@ -173,11 +222,11 @@
|
|||
"description": "<p>把一个元素上CSS类的出现与否，绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 2
|
||||
"index": 3
|
||||
},
|
||||
{
|
||||
"name": "表单",
|
||||
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n\n</p>\n",
|
||||
"description": "<p><code>import { FormsModule } from '@angular/forms';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||
|
|
@ -187,11 +236,11 @@
|
|||
"description": "<p>提供双向绑定，为表单控件提供解析和验证。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 3
|
||||
"index": 4
|
||||
},
|
||||
{
|
||||
"name": "类装饰器",
|
||||
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"description": "<p><code>import { Directive, ... } from '@angular/core';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Component({...})\nclass MyComponent() {}",
|
||||
|
|
@ -222,7 +271,7 @@
|
|||
"description": "<p>声明当前类有一些依赖，当依赖注入器创建该类的实例时，这些依赖应该被注入到构造函数中。\n\n</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 4
|
||||
"index": 5
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, provide(...)]",
|
||||
"syntax": "providers: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>为当前指令及其子指令提供依赖注入的providers数组。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 5
|
||||
"index": 6
|
||||
},
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"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": [
|
||||
"viewProviders:"
|
||||
],
|
||||
|
|
@ -271,27 +327,13 @@
|
|||
"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
|
||||
"index": 7
|
||||
},
|
||||
{
|
||||
"name": "供指令类或组件类用的字段装饰器。",
|
||||
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"description": "<p><code>import { Input, ... } from '@angular/core';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Input() myProperty;",
|
||||
|
|
@ -305,7 +347,7 @@
|
|||
"bold": [
|
||||
"@Output()"
|
||||
],
|
||||
"description": "<p>声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：<code><my-cmp (my-event)="doSomething()"></code>)</p>\n"
|
||||
"description": "<p>声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：<code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@HostBinding('[class.valid]') isValid;",
|
||||
|
|
@ -350,7 +392,7 @@
|
|||
"description": "<p>把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 7
|
||||
"index": 8
|
||||
},
|
||||
{
|
||||
"name": "指令和组件的变更检测与生命周期钩子",
|
||||
|
|
@ -420,14 +462,14 @@
|
|||
"description": "<p>在所属实例被销毁前，只调用一次。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 8
|
||||
"index": 9
|
||||
},
|
||||
{
|
||||
"name": "依赖注入配置",
|
||||
"description": "<p><code>import {provide} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"description": "<p></p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "provide(MyService, {useClass: MyMockService})",
|
||||
"syntax": "{ provide: MyService, useClass: MyMockService }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useClass"
|
||||
|
|
@ -435,7 +477,7 @@
|
|||
"description": "<p>把MyService类的提供商设置或改写为MyMockService。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "provide(MyService, {useFactory: myFactory})",
|
||||
"syntax": "{ provide: MyService, useFactory: myFactory }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useFactory"
|
||||
|
|
@ -443,7 +485,7 @@
|
|||
"description": "<p>把MyService的提供商设置或改写为myFactory工厂函数。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "provide(MyValue, {useValue: 41})",
|
||||
"syntax": "{ provide: MyValue, useValue: 41 }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useValue"
|
||||
|
|
@ -451,77 +493,100 @@
|
|||
"description": "<p>把MyValue的提供商设置或改写为值41。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 9
|
||||
"index": 10
|
||||
},
|
||||
{
|
||||
"name": "路由与导航",
|
||||
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n\n</p>\n",
|
||||
"description": "<p><code>import { Routes, RouterModule, ... } from '@angular/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() {}",
|
||||
"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": [
|
||||
"@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": [
|
||||
"router-outlet"
|
||||
],
|
||||
"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": [
|
||||
"[routerLink]"
|
||||
],
|
||||
"description": "<p>基于路由指令创建指向不同视图的链接，由路由名和可选参数组成。路由名匹配一个已配置路由的name属性。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。</p>\n"
|
||||
"description": "<p>基于路由指令创建指向不同视图的链接，由路由路径、必选参数、可选参数、查询参数和片段（fragment）组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。添加“../sibling”前缀可以导航到兄弟路由或父路由。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
||||
"bold": [
|
||||
"@CanActivate"
|
||||
],
|
||||
"description": "<p>用函数定义的一个组件装饰器，路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺(Promise)。</p>\n"
|
||||
"syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
|
||||
"bold": [],
|
||||
"description": "<p>The provided class(es) will be added to the element when the routerLink becomes the current active route.</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": [
|
||||
"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": [
|
||||
"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": [
|
||||
"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": [
|
||||
"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": [
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue