扩展控制器组件 - angularjs答案

【问题标题】：extend controller component - angularjs扩展控制器组件 - angularjs
【发布时间】：2016-10-30 15:52:06
【问题描述】：

我使用 Angular 1.5 来开发我的应用程序，我正在使用 .component()。我有三个组件和它们的控制器，它们都非常相似。如何从comp1 扩展控制器以将其与comp2 一起使用？

每个组件在一个单独的 js 文件中：

comp1.jscomp2.jscomp3.js

【问题讨论】：

this 你在找什么吗？
不幸的是，这个答案是关于控制器而不是 .component()
这与组件无关。在 Angular 1.5 中，组件只是编写指令的一种更简单的方法。组件/指令使用控制器的方式与使用 ng-controller 注释和 html-tag 的方式相同。
你做了什么决定？如果您在 2020 年仍在使用 AngularJS，则有一个建议，尽管它需要进行重大的重新线程化：考虑 moving your codebase to TypeScript，它有助于为您抽象该扩展过程。

标签： javascript angularjs components

【解决方案1】：

您也可以相互扩展组件控制器。使用以下方法：

父组件（扩展自）：

/**
 * Module definition and dependencies
 */
angular.module('App.Parent', [])

/**
 * Component
 */
.component('parent', {
  templateUrl: 'parent.html',
  controller: 'ParentCtrl',
})

/**
 * Controller
 */
.controller('ParentCtrl', function($parentDep) {

  //Get controller
  const $ctrl = this;

  /**
   * On init
   */
  this.$onInit = function() {

    //Do stuff
    this.something = true;
  };
});

子组件（扩展的那个）：

/**
 * Module definition and dependencies
 */
angular.module('App.Child', [])

/**
 * Component
 */
.component('child', {
  templateUrl: 'child.html',
  controller: 'ChildCtrl',
})

/**
 * Controller
 */
.controller('ChildCtrl', function($controller, $parentDep) {

  //Get controllers
  const $ctrl = this;
  const $base = $controller('ParentCtrl', {$parentDep});

  //Extend
  angular.extend($ctrl, $base);

  /**
   * On init
   */
  this.$onInit = function() {

    //Call parent init
    $base.$onInit.call(this);

    //Do other stuff
    this.somethingElse = true;
  };
});

您可以在子控制器中定义新方法，覆盖现有方法，调用父方法等。效果非常好。

【讨论】：

【解决方案2】：

我可能会建议您简单地使用服务来共享和组合组件。然后，您可以跳过担心.extend()、$controller 等的复杂性。

  angular
    .module('app')
    .factory('component.utils', function() {
       return {
         sharedProp: 'foo',
         sharedMethod: function() { return 'bar' }
       }
    })
    // components can all easily use functionality 
    // provided by one (or more) services, w/o 
    // needing a complicated inheritance model.
    .component('foo', {
      templateUrl: 'foo.html',
      controller: [
        'component.utils',
        function(utils) {
          this.$onInit = function() {
            this.prop = utils.sharedProp;
            utils.sharedMethod();
            // now do other foo things...
          }
        }
      ]
    })
    .component('bar', {
      templateUrl: 'foo.html',
      controller: [
        'component.utils',
        function(utils) {
          this.$onInit = function() {
            this.prop = utils.sharedProp;
            utils.sharedMethod();
            // now do other bar things...
          }
        }
      ]
    });

继承有它的位置，但是优先组合而不是继承通常是更好的解决方案。 article。

【讨论】：