gpt4 book ai didi

javascript - Angular 4 与 AngularJs 指令

转载 作者:行者123 更新时间:2023-12-01 02:42:56 24 4
gpt4 key购买 nike

所以我正在冒险学习 Angular 4。到目前为止,除了我对指令的理解之外,一切都非常简单。我想创建一个指令,根据元素的宽度调整元素的大小。在 AngularJs 中,可以这样做:

angular.module('buzzard.directives')
.directive('bzAnswers', directive)
.controller('BzAnswersController', controller);

function directive($window, $timeout) {
return {
restrict: 'A',
link: lnkFn,
controller: 'BzAnswersController',
controllerAs: 'controller'
};

function lnkFn(scope, element, attrs, controller) {
var window = angular.element($window);
controller.resize(element);

window.bind('resize', function () {
$timeout(function () {
controller.resize(element);
});
});
};
};

function controller() {
var self = this;

// Method binding
self.resize = resize;

//////////////////////////////////////////////////

function resize(parent) {
var children = parent.children();

angular.forEach(children, function (child) {
var anchor = child.getElementsByTagName('a');

if (anchor.length === 1) {
var element = anchor[0];
var dimensions = element.getBoundingClientRect();

angular.element(element).css('height', dimensions.width * .5 + 'px');
}
});
};
};

所以我的问题是,你会如何在 Angular 4 中做到这一点?是的,我正在使用 typeScript :)

最佳答案

指令元素、windowdocument 上 AngularJS 事件监听器的直接对应项是 HostListener decorator :

@Directive(...)
export class SomeDirective {
@HostListener('window:resize', ['$event'])
onResize(e) {
this.resize();
}

...
}

另请参阅this answer关于 HostListenerHostBinding 装饰器如何转换为 AngularJS。

关于javascript - Angular 4 与 AngularJs 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47439122/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com