Angular 4 与 AngularJs 指令答案

【问题标题】：Angular 4 vs AngularJs directivesAngular 4 与 AngularJs 指令
【发布时间】：2017-11-23 00:19:23
【问题描述】：

所以我开始尝试学习 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 :)

【问题讨论】：

您应该考虑阅读 Angular 文档。

标签： javascript angularjs angular typescript

【解决方案1】：

指令元素window 或document 上的AngularJS 事件侦听器的直接对应物是HostListener decorator：

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

    ...
}

另请参阅 this answer，了解 HostListener 和 HostBinding 装饰器如何转换为 AngularJS。

【讨论】：