fix: sync to 6.0(WIP)

This commit is contained in:
Zhicheng Wang 2018-05-15 12:33:17 +08:00
parent 47cc6f7a72
commit 4ff1a42339
1 changed files with 47 additions and 17 deletions

View File

@ -21,16 +21,18 @@ see the <live-example></live-example>.
<hr> <hr>
## Create a service A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
## 创建服务 提供商就相当于说明书,用来指导 DI 系统该如何获取某个依赖的值。
大多数情况下,这些依赖就是你要创建和提供的那些服务。
You can provide services to your app by using the `providers` array in an NgModule. ## Providing a service
Consider the default app generated by the CLI. In order to add a user service to it,
you can generate one by entering the following command in the terminal window:
你可以使用 NgModule 中的 `providers` 数组来为你的应用提供服务。 ## 提供服务
对于用 CLI 生成的默认应用,要想为它添加一个 `user` 服务,你可以在终端窗口中输入如下命令来生成一个:
If you already have a CLI generated app, create a service using the following CLI command in the root project directory. Replace _User_ with the name of your service.
如果你是用 CLI 创建的应用,那么可以使用下列 CLI 命令在项目根目录下创建一个服务。把其中的 `User` 替换成你的服务名。
```sh ```sh
@ -38,24 +40,48 @@ ng generate service User
``` ```
This creates a service called `UserService`. You now need to make the service available in your This command creates the following `UserService` skeleton:
app's injector. Update `app.module.ts` by importing it with your other import statements at the top
of the file and adding it to the `providers` array:
这将会创建一个名叫 `UserService` 的服务。你现在要让该服务在你的应用注入器中可用,就要修改 `app.module.ts` 文件。先在文件的顶部导入它,然后把它加入 `providers` 数组中 该命令会创建下列 `UserService` 骨架:
<code-example path="providers/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false"> <code-example path="providers/src/app/user.service.0.ts" title="src/app/user.service.0.ts" linenums="false"> </code-example>
</code-example>
You can now inject `UserService` anywhere in your application.
现在,你就可以在应用中到处注入 `UserService` 了。
The service itself is a class that the CLI generated and that's decorated with `@Injectable`. By default, this decorator is configured with a `providedIn` property, which creates a provider for the service. In this case, `providedIn: 'root'` specifies that the service should be provided in the root injector.
该服务本身是 CLI 创建的一个类,并且加上了 `@Injectable` 装饰器。默认情况下,该装饰器是用 `providedIn` 属性进行配置的,它会为该服务创建一个提供商。在这个例子中,`providedIn: 'root'` 指定该服务应该在根注入器中提供。
## Provider scope ## Provider scope
## 提供商的作用域 ## 提供商的作用域
When you add a service provider to the `providers` array of the root module, its available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpClientModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app. When you add a service provider to the root application injector, its available throughout the app. Additionally, these providers are also available to all the classes in the app as long they have the lookup token.
当你把服务提供商添加到根模块的 `providers` 数组中时,它就在整个应用程序中可用了。 当你把服务提供商添加到应用的根注入器中时,它就在整个应用程序中可用了。
另外,当你导入一个带有服务提供商的模块时,其中的服务提供商也同样对整个应用中的类是可用的 —— 只要它们有供查找用的服务令牌。 另外,这些服务提供商也同样对整个应用中的类是可用的 —— 只要它们有供查找用的服务令牌。
比如,如果你把 `HttpClientModule` 导入了 `AppModule`,它里面的提供商就是对整个应用可用的,你可以在应用的任何地方发起 HTTP 请求。
You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular `@NgModule)`.
你应该始终在根注入器中提供这些服务 —— 除非你希望该服务只有在消费方要导入特定的 `@NgModule` 时才生效。
## providedIn and NgModules
## `providedIn` 与 NgModule
It's also possible to specify that a service should be provided in a particular `@NgModule`. For example, if you don't want `UserService` to be available to applications unless they import a `UserModule` you've created, you can specify that the service should be provided in the module:
也可以规定某个服务只有在特定的 `@NgModule` 中提供。比如,如果你你希望只有当消费方导入了你创建的 `UserModule` 时才让 `UserService` 在应用中生效,那就可以指定该服务要在该模块中提供:
<code-example path="providers/src/app/user.service.1.ts" title="src/app/user.service.1.ts" linenums="false"> </code-example>
The example above shows the preferred way to provide a service in a module. This method is preferred because it enables tree-shaking of the service if nothing injects it. If it's not possible to specify in the service which module should provide it, you can also declare a provider for the service within the module:
上面的例子展示的就是在模块中提供服务的首选方式。之所以推荐该方式,是因为当没有人注入它时,该服务就可以被摇树优化掉。如果没办法指定哪个模块该提供这个服务,你也可以在那个模块中为该服务声明一个提供商:
<code-example path="providers/src/app/user.module.ts" title="src/app/user.module.ts" linenums="false"> </code-example>
## Limiting provider scope by lazy loading modules ## Limiting provider scope by lazy loading modules
@ -140,6 +166,10 @@ You may also be interested in:
[惰性加载模块](guide/lazy-loading-ngmodules)。 [惰性加载模块](guide/lazy-loading-ngmodules)。
* [Tree-shakable Providers](guide/dependency-injection#tree-shakable-providers).
[可摇树优化的服务提供商](guide/dependency-injection#tree-shakable-providers)。
* [NgModule FAQ](guide/ngmodule-faq). * [NgModule FAQ](guide/ngmodule-faq).
[NgModule 常见问题](guide/ngmodule-faq)。 [NgModule 常见问题](guide/ngmodule-faq)。