Angular Service 为什么我们要在构造函数上注入(inject)

标签 angular

为什么我们要在构造函数中注入(inject)服务作为这样的参数?

import { HeroService } from '../hero.service'; 
constructor(private heroService: HeroService) { }

我们为什么不在构造函数中注入(inject),而不是作为参数传递:
import { HeroService } from '../hero.service'; 
constructor() {
    this.heroService=HeroService;
}

是否可以按照上述方式进行?

最佳答案

因为,您可以在官方文档中找到,
The parameter simultaneously defines a private heroService property and identifies it as a HeroService injection site.

constructor(private heroService: HeroService) { }
  • 当 Angular 创建一个 HeroesComponent 时,依赖注入(inject)系统将 heroService 参数设置为 HeroService 的单例实例。
  • 您可以通过指定具有依赖类型的构造函数参数来告诉 Angular 在组件的构造函数中注入(inject)依赖。这是 HeroListComponent 的构造函数,要求注入(inject) HeroService。

  • 注:
  • 组件不应该使用 new 创建 HeroService。它应该要求注入(inject) HeroService。
  • 您可以通过指定具有依赖类型的构造函数参数来告诉 Angular 在组件的构造函数中注入(inject)依赖。这是 HeroListComponent 的构造函数,要求注入(inject) HeroService。

  • 如果我们不遵守会发生什么:

    如果您不想使用依赖注入(inject),则应该每次都创建具有所需依赖项的新服务实例,这是我们不想要的。

    此外,我们需要为该服务声明一个新变量

    例如:
    export class HeroListComponent {
      heroes: Hero[];
      heroService;
      constructor()
      {
        this.heroService = new HeroService('', '');
        this.heroes = this.heroService.getHeroes();
      }
    }
    

    Here is a reference for the same

    关于Angular Service 为什么我们要在构造函数上注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49755707/

    相关文章:

    angular - 是否可以在 angular 4 的 onclick 事件中从服务调用函数

    javascript - 如何在 Angular Firebase 中向前台发送后台通知以在 Angular 9 webapp 中显示通知?

    Angular4 Firebase 函数 'firebase deploy' 错误 "functions predeploy error: Command terminated with non-zero exit code4294963238"

    javascript - Angular 4+ 通过接口(interface)从子级向父级发送服务

    angular - 无法绑定(bind)到 'ngTemplateOutletContext'

    javascript - typescript 中的对象长度?

    angular - 如何在悬停状态下更改 Angular Material 按钮的背景颜色?

    angular - 淡入淡出动画 Angular +2

    angular - 如何动态创建引导模式作为 Angular2 组件?

    angular - 使用 BrowserTransferStateModule 时 TransferHttpCacheModule 的用途