【问题标题】：AngularJS controller inheritance in ES6ES6 中的 AngularJS 控制器继承
【发布时间】：2018-01-27 05:13:39
【问题描述】：

我在 AngularJS 中有一个项目，我有 baseController 和继承自它的子控制器。

class BaseController {
    constructor($log, $state) {
        'ngInject';

        this.$log = $log;
        this.$state = $state;
    }
}

class ChildController extends BaseController {

    constructor(myService) {
        'ngInject';

        super();
        this.myService = myService;
    }
}

我的问题是：即使我不使用它，我是否需要将所有父依赖注入注入到子控制器中？

上面的示例显示了我想要实现的目标，但它不起作用。有人知道我是否可以在不将 BaseController 服务传递给 super($scope, $state) 调用的情况下实现它？

【问题讨论】：

你为什么不用super($scope,$state)？
我需要注射两次。第一次在子构造函数中并将其传递给 super 到 BaseController，它已经注入了这些。对我来说似乎是多余的。现在我做了super($scope, $state)，但我想知道是否有更好的方法？进行 2 次注射是可以的，但是当我有大约 7 次或更多时，纠正父母和每个孩子班级中的 DI 是一项工作。
基于类的控制器应该避免注入$scope。应将常用功能移至服务而不是扩展控制器类。
$scope 只是一个例子。让我们假设有我的自定义服务（例如AuthenticationService）而不是范围。
$injector Service 只将依赖注入到实例化类的构造函数中。它不会注入到祖先类的构造函数中。

标签： javascript angularjs oop ecmascript-6

【解决方案1】：

$injector Service 仅将依赖项注入到实例化类的构造函数中。它不会注入到祖先类的构造函数中。

要使用祖先类的可注入对象构造控制器，请使用 $injector service 和 angular.extend：

class BaseController {
    constructor($log, $window) {
        'ngInject';

        this.$log = $log;
        this.$window = $window;
    }
}

class ChildController  ̶e̶x̶t̶e̶n̶d̶s̶ ̶B̶a̶s̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ {

    constructor(myService, $injector) {
        'ngInject';
        var base = $injector.instantiate(BaseController);
        angular.extend(this, base);
        ̶s̶u̶p̶e̶r̶(̶)̶;̶
        this.myService = myService;
    }
    $onInit() {
      this.$log.info("$onInit");
      this.$log.log(this.base);
    }
}

The DEMO

class BaseController {
    constructor($log, $window) {
        'ngInject';

        this.$log = $log;
        this.$window = $window;
        this.base = "Hello from BaseController";
    }
}

class ChildController {

    constructor(myService, $injector) {
        'ngInject';
        var base = $injector.instantiate(BaseController);
        angular.extend(this, base);
        //super();
        this.myService = myService;
    }
    $onInit() {
      this.$log.info("$onInit");
      this.$log.log(this.base);
    }
}

angular.module("app",[])
.controller("child", ChildController)
.value("myService", {})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="child as vm">
    {{vm.base}}
  </body>

【讨论】：

谢谢，我的情况很好，但它看起来有点老套（不是抱怨）;)