[英]extend controller component - angularjs
I use angular 1.5 to develop my application and I am using .component()
. 我使用angular 1.5开发我的应用程序,我使用
.component()
。 I have three components and their controllers, all of which are quite similar. 我有三个组件及其控制器,所有组件都非常相似。 How can I extend the controller from
comp1
to use it with comp2
? 如何从
comp1
扩展控制器以将其与comp2
一起使用?
Each component in a separate js file: 单独的js文件中的每个组件:
comp1.js
comp2.js
comp3.js
comp1.js
comp2.js
comp3.js
You can extend component controllers from each other as well. 您也可以相互扩展组件控制器。 Use the following approach:
使用以下方法:
Parent component (to extend from): 父组件(从中扩展):
/**
* 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;
};
});
Child component (the one extending): 子组件(扩展的那个):
/**
* 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;
};
});
You can define new method in the child controller, overwrite existing methods, call the parent methods, etc. Works really well. 您可以在子控制器中定义新方法,覆盖现有方法,调用父方法等。工作得非常好。
I may suggest that you simply use services to share and compose components. 我可能会建议您只使用服务来共享和组合组件。 You can then skip the complexities of worrying about
.extend()
, $controller
, etc. 然后,您可以跳过担心
.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...
}
}
]
});
Inheritance has its place, but favoring composition over inheritance is usually the better solution. 继承有它的位置,但有利于组合而不是继承通常是更好的解决方案。 article .
文章 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.