例外：没有数组的提供者！通过构造函数简写初始化变量时

Posted 2023-03-13

【中文标题】例外：没有数组的提供者！通过构造函数简写初始化变量时

【英文标题】：Exception: No provider for Array! When initializing variable through the constructor shorthand

【发布时间】：2017-02-08 19:34:33

【问题描述】：

我目前正在通过angular.io 网站了解 Angular2。跟随dashboard.component.ts的实现（见下图）。

（A1：我的实现）

import  Component, OnInit  from '@angular/core';
import  Hero      from './hero'
import  HeroService  from './hero.service';

@Component(
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html'
)
export class DashboardComponent implements OnInit 

    constructor(private heroes: Hero[], private heroService: HeroService)

    ngOnInit()
        this.heroService.getHeroes().then(heroList => this.heroes = heroList.slice(1,5))
    

    goToDetail(hero: Hero):void

    

我收到以下错误。

（A2：堆栈跟踪）

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array!
ORIGINAL STACKTRACE:
Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array!
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:429:31)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:406:13
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
    at Object.onInvoke (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6242:41)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:202:34)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37)
    at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6233:41)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:235:42)
Unhandled Promise rejection: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! ; Zone: angular ; Task: Promise.then ; Value: Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! ... Error: No provider for Array!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1255:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1739:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1770:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3366:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3394:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3357:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3166:25)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7222:56)
    at ElementInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9303:52)
Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! ...

但是，当我以与网页上相同的方式编写时（查看下面的摘录），我不再收到错误 (A2)。为什么会这样？

（A3：教程提供的实现）

export class DashboardComponent implements OnInit 

  heroes: Hero[] = [];

  constructor(private heroService: HeroService)  

  ngOnInit(): void 
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
  

  gotoDetail(hero: Hero): void  /* not implemented yet */

在教程中，按照我实现的方式 (A1) 定义构造函数应该与教程 (A3) 提供的代码在创建初始化英雄列表方面具有相同的结果。我错过了什么吗？

【参考方案1】：

是的，你错过了这样一个事实，即第一种方式，你的构造函数有一个Hero[] 类型的附加参数，Angular 需要调用该构造函数，从而提供所需的参数，从而找到一个提供Hero[] 的实例传递给您的构造函数。

你不应该将英雄作为构造函数的一部分，因为 Angular 在构建组件时不能传递英雄。组件使用服务自行获取英雄。

【讨论】：

感谢您提供的信息，但我仍然无法理解您的答案，主要是因为我对角度概念还很陌生。您能否将我重定向到进一步讨论此案的消息来源？或者简单地进一步阐述你的观点：) 更新 我已经重读了 angular.io 依赖注入教程中关于“提供者”的部分。他们没有完全提到这是如何工作的。但是目前我假设通过将组件声明为@Injectable()，这将导致 Angular 尝试为构造函数中的每个参数查找提供程序，这是正确的吗？

组件始终是可注入的。因此，所有构造函数参数都是由 Angular 注入的服务。你的英雄数组不是一个可以注入的服务，它也不应该是一个参数，因为构造函数甚至不使用这个参数值。