angular 6 依赖注入

Question

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

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

但是文档仍然提到在模块元数据中的模块 providers 数组中注册服务，就像我们在 Angular 5:

中所做的那样

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

所以，

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

Answer 1

一如既往，当有多种解决方案可用时，这取决于您想要实现的目标。但是 the documentation 给了你一些选择的指令。

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.

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

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

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

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

Answer 2

基本上您都可以使用，但是根据新的 CLI provideIn 将在创建 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 UsersModule without 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.

更多信息请参考这里

https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/
https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component
https://angular.io/guide/hierarchical-dependency-injection#moduleinjector [根据Tuan-Tu在下方评论中的建议]

Answer 3

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

Answer 4

@NgModule() 和 @Component() 装饰器具有提供者元数据选项，您可以在其中为 NgModule 级或组件级注入器配置提供者。

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

在您的情况下，因为它已在 "root" 级别提供，所以无需再次将其添加为模块中的提供者。

更多关于Dependency Injection Here

Answer 5

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

通过使用 providedIn 将有利于 tree shakable 特性。

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

angular 6 依赖注入

angular 6 dependency injection

javascript

typescript

angular-cli

angular

angular6