javascript – 扩展控制器组件 – angularjs

2023年2月24日 225次阅读

我使用angular 1.5开发我的应用程序,我使用.component().我有三个组件及其控制器,所有组件都非常相似.如何从comp1扩展控制器以将其与c​​omp2一起使用？

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

comp1.js comp2.js comp3.js

最佳答案 您也可以相互扩展组件控制器.

使用以下方法：

父组件(从中扩展)：

/**
 * 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;
  };
});

您可以在子控制器中定义新方法,覆盖现有方法,调用父方法等.工作得非常好.

点赞