Angular 装饰器

2024年8月29日 | 阅读 7 分钟

装饰器是设计模式，用于在不修改源代码的情况下隔离类的修改或装饰。

在 AngularJS 中，装饰器是允许在服务、指令或过滤器使用前对其进行修改的函数。

Angular 装饰器主要有四种类型

类装饰器，例如 @Component 和 @NgModule
类内部属性的属性装饰器，例如 @Input 和 @Output
类内部方法的Method装饰器，例如 @HostListener
类构造函数内部参数的参数装饰器，例如 @Inject

每个装饰器都有独特的角色。让我们看一些示例来扩展上面列表中的类型。

类装饰器

Angular 为我们提供了一些类装饰器。它们允许我们告诉 Angular 某个类是一个组件或一个模块，例如：装饰器允许我们在不向类中放入任何代码的情况下定义此效果。

与类一起使用的 @Component 和 @NgModel 装饰器

import { NgModule, Component } from '@angular/core';
@Component({
  selector: 'example-component',
  template: '<div>Woo a component!</div>',
})
export class ExampleComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}
@NgModule({
  imports: [],
  declarations: [],
})
export class ExampleModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}

它是一个组件或一个模块，类中不需要任何代码来告诉 Angular。我们需要装饰它，Angular 会完成其余的工作。

属性装饰器

这些是您将看到的第二常见的装饰器。它们允许我们装饰类中的某些属性。

想象一下，我们类中有一个属性，我们希望它是一个 InputBinding。

我们必须在类中为 TypeScript 定义此属性，而无需装饰器，并告诉 Angular 我们有一个希望成为输入的属性。

使用装饰器，我们可以简单地将 @Input() 装饰器放在属性上方 - AngularJS 编译器将使用属性名称创建一个输入绑定并将其链接。

import { Component, Input } from '@angular/core';
@Component({
  selector: 'example-component',
  template: '<div>Woo a component!</div>'
})
export class ExampleComponent {
  @Input()
  exampleProperty: string;
}

我们将通过组件属性绑定传递输入绑定

<example-component
  [exampleProperty]="exampleData">
</example-component>

我们有另一台机器使用带有指令的 scope 或 bindToController，以及新组件方法中的绑定

const example component = {
  bindings: {
    exampleProperty: '<'',
  },
  template: `
    <div>Woo a component!</div>
  `,
  controller: class ExampleComponent {
    exampleProperty: string;
    $onInit() {
      // access this.exampleProperty
    }
  },
};
angular.module('app').component('exampleComponent', example component);

您可以看到上面我们有两个不同的属性需要维护。但是，单个属性实例属性被装饰，这使得我们的代码库增长时 易于更改、维护和跟踪。

如何使用装饰器？

有两种方法来注册装饰器

提供 $. 装饰器和
模块。装饰器

每个都允许访问 $delegate，它是一个即时服务/指令/过滤器，然后才传递给需要它的服务。

$provide.decorator

装饰器函数允许在服务实例化后立即访问其 $delegate。

For example:angular.module('myApp', [])
.config([ '$provide', function($provide) {

  $provide.decorator('$log', [
    '$delegate',
    function $logDecorator($delegate) {

      var originalWarn = $delegate.warn;
      $delegate.warn = function decoratedWarn(msg) {
        msg = 'Decorated Warn: ' + msg;
        originalWarn.apply($delegate, arguments);
      };
 return $delegate;
    }
  ]);
}]);

在 $log 服务实例化后，装饰器被触发。在装饰器函数中，注入一个 $delegate 对象，以提供对装饰器中与选择器匹配的服务。$delegate 将是您正在装饰的服务。

传递给装饰器函数的返回值是被装饰的服务、指令或过滤器。

$delegate 可以被修改或完全替换。

完全替换 $delegate

angular.module('myApp', [])
.config([ '$provide', function($provide) {
  $provide.decorator('myService', [
    '$delegate',
    function myServiceDecorator($delegate) {
      var myDecoratedService = {
        // new service object to replace myService
      };
      return myDecoratedService;
    }
  ]);
}]);
Patch the $delegate
angular.module('myApp', [])
.config([ '$provide', function($provide) {
  $provide.decorator('myService', [
    '$delegate',
    function myServiceDecorator($delegate) {
      var someFn = $delegate.someFn;
      function aNewFn() {
        // new service function
        someFn.apply($delegate, arguments);
      }
      $delegate.someFn = aNewFn;
      return $delegate;
    }
  ]);
}]);
Augment the $delegate
angular.module('myApp', [])
.config([ '$provide', function($provide) {
  $provide.decorator('myService', [
    '$delegate',
    function myServiceDecorator($delegate) {
      function helperFn() {
        // an additional fn to add to the service
      }
      $delegate.aHelpfulAddition = helperFn;
      return $delegate;
    }
  ]);
}]);

装饰器函数返回的任何内容都将替换被装饰的内容。

例如，缺少 return 语句将清除被装饰的整个对象。

装饰器对不同的服务有不同的规则。这是因为服务以不同的方式注册。服务通过在名称末尾附加 "Filter" 或 "Directive" 来选择。服务的类型决定了提供的 $delegate。

服务类型	选择器	$delegate
服务	serviceName	服务返回的对象或函数。
指令	directiveName + 'Directive'	一个数组₁
Filter	filterName + 'Filter'	过滤器返回的函数

1. 多个指令将注册到同一个选择器

开发人员应该注意他们如何以及为什么修改服务的 $delegate。不仅消费者必须有期望，而且一些功能不是在装饰之后发生，而是在原生服务的创建/注册期间发生。

例如，将指令（例如指令对象）推送到指令 $delegate 可能会导致意外行为。

此外，在装饰核心服务、指令或过滤器时必须格外小心，因为这可能会意外或不利地影响框架的功能。

模块。装饰器

此函数与 $provide 相同。它通过模块 API 公开，除了装饰器函数。它允许您将装饰器模式与模块配置块分离。

装饰器函数在应用程序的配置阶段与 $provided 一起运行。装饰器模块。装饰器在被装饰的服务之前定义。

您可以实现多个装饰器，值得一提的是，装饰器的应用始终遵循声明的顺序

如果一个服务同时被 $provide.decorator 和 module.decorator 装饰，则装饰器按顺序应用

angular.module('theApp', [])
.factory('theFactory', theFactoryFn)
.config(function($provide) {
  $provide.decorator('theFactory', provideDecoratorFn); // runs first
})
.decorator('theFactory', moduleDecoratorFn); // runs seconds

该服务已声明多次，装饰器将装饰最后声明的服务：-

angular
  .module('theApp', [])
  .factory('theFactory', theFactoryFn)
  .decorator('theFactory', moduleDecoratorFn)
  .factory('theFactory', theOtherFactoryFn);

// `theOtherFactoryFn` is selected as 'theFactory' provider `.

示例应用

以下部分提供了每个服务装饰器、指令装饰器和过滤器装饰器的示例。

服务装饰器示例

此示例演示了我们如何用自己的 $log 服务替换 $log 服务来显示日志消息。

script.jsindex.htmlstyle.cssprotractor.js

Angular.module('myServiceDecorator', []).
controller('Ctrl', [
  '$scope',
  '$log',
  '$timeout',
  function($scope, $log, $timeout) {
    var types = ['error', 'warn', 'log', 'info' ,'debug'], i;
    for (i = 0; i < types.length; i++) {
      $log[types[i]](types[i] + ': message ' + (i + 1));
    }
    $timeout(function() {
      $log.info('info: message logged in timeout');
    });
  }
]).
directive('myLog', [
  '$log',
  function($log) {
    return {
      restrict: 'E',
      template: '<ul id="myLog"><li ng-repeat="l in myLog" class="{{l.type}}">{{l.message}}</li></ul>',
      scope: {},
      compile: function() {
        return function(scope) {
          scope.myLog = $log.stack;
        };
      }
    };
  }
]).
config([
  '$provide',
  function($provide) {
    $provide.decorator('$log', [
      '$delegate',
      function logDecorator($delegate) {
        var myLog = {
          warn: function(msg) {
            log(msg, 'warn');
          },
          error: function(msg) {
            log(msg, 'error');
          },
          info: function(msg) {
            log(msg, 'info');
          },
          debug: function(msg) {
            log(msg, 'debug');
          },
          log: function(msg) {
            log(msg, 'log');
          },
          stack: []
        };
        function log(msg, type) {
          myLog.stack.push({ type: type, message: msg.toString() });
          if (console && console[type]) console[type](msg);
        }
        return myLog;
      }
    ]);
  }
]);

指令装饰器示例

ng-href 属性中失败的插值表达式很容易被忽略。我们可以装饰 ngHref 以警告我们这些情况。

script.jsindex.htmlprotractor.js

Angular.module('urlDecorator', []).
controller('Ctrl', ['$scope', function($scope) {
  $scope.id = 3;
  $scope.warnCount = 0; // for testing
}]).
config(['$provide', function($provide) {
  // matchExpressions looks for interpolation markup in the directive attribute, extracts the expressions
  // from that markup (if they exist) and returns an array of those expressions
  function matchExpressions(str) {
    var exps = str.match(/{{([^}]+)}}/g);
    // if there isn't any, get out of here
    if (exps === null) return;
    exps = exps.map(function(exp) {
      var prop = exp.match(/[^{}]+/);
      return prop === null ? null : prop[0];
    });
    return experts;
  }
  // remember: directives must be selected by appending 'Directive' to the directive selector
  $provide.decorator('ngHrefDirective', [
    '$delegate',
    '$log',
    '$parse',
    function($delegate, $log, $parse) {
      // store the original link fn
      var originalLinkFn = $delegate[0].link;
      // replace the compile fn
      $delegate[0].compile = function(tElem, tAttr) {
        // store the original exp in the directive attribute for our warning message
        var originalExp = tAttr.ngHref;
        // get the interpolated expressions
        var exps = matchExpressions(originalExp);
        // create and store the getters using $parse
        var getters = exps.map(function(exp) {
          return exp && $parse(exp);
        });
        return function newLinkFn(scope, elem, attr) {
          // fire the originalLinkFn
          originalLinkFn.apply($delegate[0], arguments);
          // observe the directive attr and check the expressions
          attr.$observe('ngHref', function(val) {
            // if we have getters and getters is an array...
            if (getters && angular.isArray(getters)) {
              // loop through the getters and process them
              angular.forEach(getters, function(g, idx) {
                // if val is truthy, then the warning won't log
                var val = angular.isFunction(g) ? g(scope) : true;
                if (!val) {
                  $log.warn('NgHref Warning: "' + exps[idx] + '" in the expression "' + originalExp +
                    '" is falsy!');
                  scope.warnCount++; // for testing
                }
              });
            }
          });
        };
      };
      // get rid of the old link function since we return a link function in compile
      delete $delegate[0].link;
      // return the $delegate
      return $delegate;
    }
  ]);
}]);

过滤器装饰器示例

我们创建了一个应用程序，该应用程序使用我们许多日期过滤器的默认格式。我们需要所有默认日期都为 'shortDate' 而不是 'mediumDate'。

script.jsindex.htmlprotractor.js

Angular.module('filterDecorator', []).
controller('Ctrl', ['$scope', function($scope) {
  $scope.genesis = new Date(2010, 0, 5);
  $scope.ngConf = new Date(2016, 4, 4);
}]).
config(['$provide', function($provide) {
  $provide.decorator('dateFilter', [
    '$delegate',
    function dateDecorator($delegate) {
      // store the original filter
      var originalFilter = $delegate;
      // return our filter
      return shortDateDefault;
      // shortDateDefault sets the format to shortDate if it is falsy
      function shortDateDefault(date, format, timezone) {
        if (!format) format = 'shortDate';
        // return the result of the original filter
        return originalFilter(date, format, timezone);
      }
    }
  ]);
}]);

装饰器是使用 Angular 开发时的核心概念。内部代码库大量使用了装饰器。

下一主题Angular 路由

Angular 装饰器

类装饰器

属性装饰器

如何使用装饰器？

1. 多个指令将注册到同一个选择器

模块。装饰器

示例应用

服务装饰器示例

指令装饰器示例

过滤器装饰器示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

Angular 装饰器

类装饰器

属性装饰器

如何使用装饰器？

1. 多个指令将注册到同一个选择器

模块。装饰器

示例应用

服务装饰器示例

指令装饰器示例

过滤器装饰器示例

相关帖子

Angular 生命周期

在按钮单击 Angular 上切换 Div

在 Angular 中定义数组

Angular 的应用

AngularJS 范围

Angular 的五个最佳单元测试工具

使用 dirPagination 指令在 Angularjs 中创建分页

Angular 图像上传，带裁剪、缩放、缩放

Angular 中的动态类

Angular 属性绑定

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器