AngularJS(1.x) 和 Angular (2/4) 装饰器的区别

Question

我开始使用 Angular 版本 2 并遇到了 @Component Decorator。我记得 AngularJS(1.x) 也有一个装饰器的概念，它用于扩展/更改任何服务的默认实现。

似乎在 Angular 2 中，它们不是更改/扩展默认功能，而是将元数据添加到从类（使用 @Component）到属性（使用 Input()/Output() 装饰器）的范围内，并且列表如下用于管道和服务等。

有人可以提供两者之间的差异（如果有的话）吗？ 概念/实际工作。

谢谢。 迪帕克

Answer 1

AngularJS

AngularJS 装饰器是一个OOP pattern。

AngularJS 中很少使用它来扩展内置对象的行为。比如下面的implementation使用$provider.decorator()拦截$log.debug()调用，动态前置时间戳信息。

$provide.decorator('$log', [
    "$delegate", function ($delegate) {
        // Save the original $log.debug()
        var debugFn = $delegate.debug;

        $delegate.debug = function () {
            var args = [].slice.call(arguments),
                now = DateTime.formattedNow();

            // Prepend timestamp
            args[0] = supplant("{0} - {1}", [now, args[0]]);

            // Call the original with the output prepended with formatted timestamp
            debugFn.apply(null, args)
        };

        return $delegate;
    }
]);

角度

Angular 装饰器是a language-feature：

提供了一种方便的声明式语法来修改类的形状 声明。此功能可用于多种用途 包括修改声明成员的描述符 （@nonconfigurable/@enumerable），添加元数据（Angular 使用的）， 和更多。它允许附加访问

Angular 使用它将元数据附加到类、类成员（属性）和方法参数。要了解 Angular 是如何做到这一点的，请阅读 Implementing custom component decorator in Angular。

在大于 4 的版本中，Angular 将不再在运行时动态评估装饰器，并将使用静态代码分析来提取装饰器描述符中指定的元数据。