Javascript 角度 6 依赖注入

angular 6 dependency injection

提问by Hamed Baatour

In the latest release of Angular 6, a service is registered in a module using the providedInproperty in the service metadata:

在 Angular 6 的最新版本中，使用providedIn服务元数据中的属性在模块中注册服务：

@Injectable({
  providedIn: 'root',
})
export class HeroService {}

However the documentation still also refers to registering the service in the module providersarray in the module metadata just like we did in Angular 5:

然而，文档仍然提到providers在模块元数据中的模块数组中注册服务，就像我们在 Angular 5 中所做的那样：

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

So,

所以，

• Which method should be used to make the injector aware of the service that it should inject?
• Will the module providersarray method be deprecated?

• 应该使用哪种方法让注入器知道它应该注入的服务？
• 模块providers数组方法会被弃用吗？

回答by Pardeep Jain

Basically you can use either, But as per new CLI provideInwill be automatically added while creating service

基本上你可以使用任何一个，但根据新的 CLIprovideIn将在创建时自动添加service

providedIn

提供在

There is now a new, recommended, way to register a provider, directly inside the @Injectable()decorator, using the new providedIn attribute. It accepts 'root'as a value or any module of your application. When you use 'root', your injectable will be registered as a singleton in the application, and you don't need to add it to the providers of the root module. Similarly, if you use providedIn: UsersModule, the injectable is registered as a provider of the UsersModulewithout adding it to the providers of the module.

This new way has been introduced to have a better tree-shaking in the application. Currently a service added to the providers of a module will end up in the final bundle, even if it is not used in the application, which is a bit sad.

现在有一种新的、推荐的@Injectable()、使用新的providedIn 属性直接在装饰器内部注册提供者的方法。它接受'root'作为值或应用程序的任何模块。当您使用 时'root'，您的可注入对象将在应用程序中注册为单例，您无需将其添加到根模块的提供程序中。同样，如果您使用 ，则可providedIn: UsersModule注入对象将注册为 的提供者，而 UsersModule无需将其添加到模块的提供者中。

引入这种新方法是为了在应用程序中实现更好的摇树。目前添加到模块提供者的服务最终会出现在最终的 bundle 中，即使它没有在应用程序中使用，这有点令人难过。

For more information please refer here

有关更多信息，请参阅此处

• https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/
• https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component

• https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/
• https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component

回答by JEY

As always when multiple solutions are available it depends on what you want to achieve. But the documentationgives you some directive to choose.

与往常一样，当有多种解决方案可用时，这取决于您想要实现的目标。但是文档为您提供了一些选择指令。

Sometimes it's not desirable to have a service always be provided in the application root injector. Perhaps users should explicitly opt-in to using the service, or the service should be provided in a lazily-loaded context. In this case, the provider should be associated with a specific @NgModule class, and will be used by whichever injector includes that module.

有时不希望在应用程序根注入器中始终提供服务。也许用户应该明确选择使用该服务，或者应该在延迟加载的上下文中提供该服务。在这种情况下，提供者应该与特定的 相关联@NgModule class，并且将由包含该模块的任何注入器使用。

So basically you will use providedIn: 'root'for any services that are application wide. For other services keep using the old version.

所以基本上你将providedIn: 'root'用于任何应用程序范围内的服务。对于其他服务，请继续使用旧版本。

Don't forget that on you already had the choice to provide service differently. For instance it's also possible to declare Injectable at component level (this doesn't change in V6).

不要忘记，您已经可以选择以不同的方式提供服务。例如，也可以在组件级别声明 Injectable（这在 V6 中不会改变）。

  @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    providers: [ MyService ]
  })

This way the service becomes available only in MyComponentand its sub-component tree.

这样，服务仅在MyComponent其子组件树中可用。

回答by Prashant

If You are using angular 5+ developer, it will automatically create the injectable service when declared as providedIn: 'root', in this case you will not required to import the service in app.module.ts. You can directly use it in another component.

如果您使用的是 angular 5+ 开发人员，当声明为providedIn: 'root' 时，它会自动创建可注入服务，在这种情况下，您不需要在 app.module.ts 中导入该服务。您可以直接在另一个组件中使用它。

回答by CharithJ

The @NgModule()and @Component()decorators have the providers metadata option, where you can configure providers for NgModule-level or component-level injectors.

在@NgModule()与@Component()装饰有提供元数据选项，在这里您可以NgModule级或组件级注射器配置提供。

The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for a specific NgModule.

@Injectable() 装饰器具有 providedIn 元数据选项，您可以在其中使用根注入器或特定 NgModule 的注入器指定装饰服务类的提供者。

In your case, because it has been providedIn at "root" level, no need to add this again as a provider in the module.

在您的情况下，因为它已在“根”级别提供，因此无需再次将其添加为模块中的提供者。

More about Dependency Injection Here

更多关于依赖注入在这里

回答by Shailendra Sharma

When we use providedIn: 'root' property in @injectablewe don't need to entry in the provider's array.

当我们使用providedIn: 'root' 属性时，@injectable我们不需要在提供者的数组中输入。

By using providedInthere will be beneficial for tree shakable feature.

通过使用providedIn将有利于树的可摇动特性。

Tree shakable feature removes unused dependency at the time of production when it is not used.

Tree shakable 特性在不使用时删除生产时未使用的依赖项。