在扩展控制器（ES6）中注入模块会导致未知提供程序错误

Question

我有一个控制器类ModalCtrl，我想创建一个子类ModalCtrlChild extends ModalCtrl。问题是当我尝试这样做时，在ModalCtrl 中注入的任何模块中都会出现未知的提供程序错误。

我使用this 生成器构建项目，它在幕后使用 NgInject 注入依赖项，我怀疑那里发生了一些有趣的事情。

模态控件：

export default class ModalCtrl {
  static get UID(){
    return "ModalCtrl"
  }
  ... // all my ModalCtrl methods here

 /* @ngInject */
  constructor(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    "ngInject";
    ... // ModalCtrl constructor logic initing variables
  }
}

ModalCtrlChild：

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor() {
    // "ngInject";
    console.log("in super constructor");
    super();
  }
}

错误：

Error: [$injector:modulerr] Failed to instantiate module function ModalCtrlChild() due to:
Error: [$injector:unpr] Unknown provider: ngDialog
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ngDialog

ngDialog 绝对已导入并正常工作。如果从 ModalCtrlChild 删除 extends ModalCtrl 我不会收到任何错误，并且我的代码运行良好，但我无法获得所需的继承。任何想法表示赞赏。

编辑

我在发布问题之前尝试过 eenagy 的回答，但这也不起作用，因为问题似乎出在子类注入中，而不是在父类注入中。

sourdoughdetzel，试试你的建议：

1. 从 ModalCtrlChild 中移除注释和依赖项
2. 从 ModalCtrl 中删除注释和依赖项，但将它们留在子项中

得到完全相同的错误：

Error: [$injector:modulerr] Failed to instantiate module function PreoModalController_Form() due to:
Error: [$injector:unpr] Unknown provider: ngDialog

我怀疑这与 babel 构建扩展类的方式有关，并且不允许 ngInject 完成它的工作。我正在尝试在这里找到一种手动注入的方法，这应该可以解决问题并证明这是问题所在，因为我对 babel 如何解决此问题了解不足。

Answer 1

我的猜测是，当您从子类的构造函数中调用“super()”时，ngInject 并没有做它应该在幕后做的事情。在四处搜索时，我在 ngInject 上没有看到太多内容，但由于手动调用正在发生的构造函数，它可能会短路。

如果您将依赖项放入 ModalCtrlChild 控制器并取消注释“ngInject”字符串，然后将它们传递给 super() 调用，它是否按预期工作？

Answer 2

错误信息实际上告诉你缺少什么。

Unknown provider: ngDialog

你也需要在你的子类中声明你的依赖。

所以不是这个

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor() {
    // "ngInject";
    console.log("in super constructor");
    super();
  }
}

需要传入参数。

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    // "ngInject";
    console.log("in super constructor");
    super(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService);
  }
}

ngInject 无法知道需要哪些依赖项。它应该怎么知道？在现实世界中可能有几十个 ngDialog 的子类，它们与合约匹配并且可以作为参数传递。您需要指定需要哪个，以便它可以传入。

例如，假设您有一个名为 ngPopupDialog 的 ngDialog 子类。

还有你的示例子类。以下可以用来代替 ngDialog，并且会匹配 super。

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor(ngPopupDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    // "ngInject";
    console.log("in super constructor");
    super(ngPopupDialog, PreoModalType, OutletService, $q, $timeout, VenueService);
  }
}