typescript 装饰器如何允许 angular 2 发现类型元数据

Question

我不明白 typescript 装饰器 @Injectable 如何捕获类型信息，以及当构造函数参数列表中没有提供显式 @Inject(...) 时它后来如何知道哪个构造函数参数对应于哪种类型？如何复制这种行为，简单来说就是为我自己的库创建我自己的注入器。

@Injectable()
export class AppService {
}

export class AppComponent {
    public constructor(private appService: AppService) {

    }
}

Answer 1

例如，您可能会在编译后的代码中看到装饰器如何工作的见解

编译后的代码如下所示，

    ComponentClass = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'component-selector',
            templateUrl: 'component.html',
            styleUrls: ['component.css'],
            providers: [component_service_1.ComponentService]
        }), 
        __metadata('design:paramtypes', [component_service_1.ComponentService])
    ], ComponentClass);

当 angular 核心对此进行调查时，它使用 Reflect.js 获取有关组件的元数据信息。

要创建自己的装饰器，您可以在下面尝试，

MyCustomDecorator

import "reflect-metadata";

interface ICustomDecoratorMeta{
    var1: string
}

export var MyCustomDecorator =
    (metadata: <ICustomDecoratorMeta>) => {
        return (target) => {
           Reflect.defineMetadata("MyCustomDecorator", metadata, target);
        }
    }

如何使用，

@MyCustomDecorator({
   var1 : "Hello"
})
export class MyClass(){}


// To retrieve metadata you can use below,

var metadata = Reflect.getMetadata('MyCustomDecorator', MyClass);

希望对您有所帮助！！

typescript 装饰器如何允许 angular 2 发现类型元数据

How does typescript decorators allow angular 2 to discover type metadata

typescript

typescript2.0

angular