Angular 个人深究【Angular中的Typescript 装饰器】
最近进入一个新的前端项目，为了能够更好地了解Angular框架，想到要研究底层代码。
注：本人前端小白一枚，文章旨在记录自己的学习过程，如有大神发现错误，也请评论指正。
Angular 中的装饰器
当安装好Angular后，打开 文件[/my-app/src/app/app.module.ts] 与文件 [/my-app/src/app/app.component.ts]
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}) export class AppComponent { title = 'app';
}
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component';
import { Test1Component } from './test1/test1.component';
import { Test2Component } from './test2/test2.component'; @NgModule({
declarations: [
AppComponent,
Test1Component,
Test2Component
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
两个文件中的@Component与 @Ngmodule 就是我们今天要说的typescript的装饰器的用法。
Typescript装饰器的由来
1) 经过查询资料，装饰器的概念来自于Python（本人Python也是小白）
def decorator(target):
print("You are decorated!")
return targett
#decorator是可以自定义的
@decorator
def yourfunction:
print("This is your function!")
yourfunction() #一下是运行结果
#You are decorated!
#This is your function! #网上还有分析，以上的代码的等价写法有助于理解。
2) ES6 引入了装饰器这个功能。
3) Angular 中 装饰器的测试
注：查询网上说Nodejs 与 Typescript都能支持装饰器，但是本人没有调试成功，以后扩展。
装饰【类】的装饰器：
//test1.component.ts
import { Component, OnInit } from '@angular/core';
function test (target) {
console.log(target);
target.title = "app1";
return target;
}
//装饰一个类
@test
@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
title = 'app';
constructor() {}
ngOnInit() {}
}
console.log(Test1Component.title); //输出结果是app1
装饰【类的方法、属性】的装饰器
import { Component, OnInit } from '@angular/core';
function readonly(flag:boolean){
return function readonly(target, name, descriptor) {
console.log(descriptor);
descriptor.writable = flag;
return descriptor;
}
}
export class Test1Component implements OnInit {
ngOnInit() {
this.test = function(){console.log("change")};
}
@readonly(false)
test(){
console.log("inner test function");
}
}
//控制台报错：ERROR TypeError: Cannot assign to read only property 'test' of object '[object Object]'
//打印的descriptor {value: ƒ, writable: true, enumerable: true, configurable: true}
/* 属性与方法都是一样的 */
Angular中的装饰器解读
- 【NgModule 装饰器】
代码位置：node_modules\@angular\core\fesm5\core.js line1436（直接搜索var NgModule =）
/**
* NgModule decorator and metadata.
*
*
* @Annotation
*/
var NgModule = makeDecorator('NgModule', function (ngModule) { return ngModule; }, undefined, undefined, function (moduleType, metadata) {
var imports = (metadata && metadata.imports) || [];
if (metadata && metadata.exports) {
imports = __spread(imports, [metadata.exports]);
}
moduleType.ngInjectorDef = defineInjector({
factory: convertInjectableProviderToFactory(moduleType, { useClass: moduleType }),
providers: metadata && metadata.providers,
imports: imports,
});
});
格式：
@NgModule({
providers: Provider[]//Defines the set of injectable objects that are available in the injector of this module.
declarations: Array<Type<any> | any[]>//Specifies a list of directives/pipes that belong to this module
imports: Array<Type<any> | ModuleWithProviders | any[]>//Specifies a list of modules whose exported directives/pipes should be available to templates in this module. This can also contain ModuleWithProviders
exports: Array<Type<any> | any[]>//Specifies a list of directives/pipes/modules that can be used within the template of any component that is part of an Angular module that imports this Angular module.
entryComponents: Array<Type<any> | any[]>//Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.
bootstrap: Array<Type<any> | any[]>//Defines the components that should be bootstrapped when this module is bootstrapped. The components listed here will automatically be added to entryComponents.
schemas: Array<SchemaMetadata | any[]>//Elements and properties that are not Angular components nor directives have to be declared in the schema.
id: string//An opaque ID for this module, e.g. a name or a path. Used to identify modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.
})
//更多内容请访问官网
//https://www.angular.cn/api/core/NgModule
//https://www.angular.cn/guide/architecture-modules
//查看
代码解读：
function makeDecorator(name, props, parentClass, chainFn, typeFn) {var metaCtor = makeMetadataCtor(props);
function DecoratorFactory() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}if (this instanceof DecoratorFactory) {
// 将使用装饰器的时候传入的参数放到descratorFactory
//推荐https://www.jianshu.com/p/00dc4ad9b83f 去查看 .call.apply的作用
//__spread 方法定义在tslib.js中， 将数组元素经过__read方法后concat
metaCtor.call.apply(metaCtor, __spread([this], args));return this;
}
var annotationInstance = new ((_a = DecoratorFactory).bind.apply(_a, __spread([void 0], args)))();
var TypeDecorator = function TypeDecorator(cls) {
typeFn && typeFn.apply(void 0, __spread([cls], args));
// Use of Object.defineProperty is important since it creates non-enumerable property which
// prevents the property is copied during subclassing.
var annotations = cls.hasOwnProperty(ANNOTATIONS) ?
cls[ANNOTATIONS] :
Object.defineProperty(cls, ANNOTATIONS, { value: [] })[ANNOTATIONS];
annotations.push(annotationInstance);
return cls;
};
if (chainFn)
chainFn(TypeDecorator);
return TypeDecorator;
var _a;
}
if (parentClass) {
DecoratorFactory.prototype = Object.create(parentClass.prototype);
}
DecoratorFactory.prototype.ngMetadataName = name;
DecoratorFactory.annotationCls = DecoratorFactory;
//最后返回 DecoratorFactory
return DecoratorFactory;
}
注：期待有大神能够看到我的文章，并提出我的问题所在，小白一枚如果有错误还望指正。在此谢过。
参考网址：
http://es6.ruanyifeng.com/#docs/decorator
http://web.jobbole.com/88572/
https://www.cnblogs.com/Wayou/p/es6_new_features.html#2917341
https://www.jianshu.com/p/00dc4ad9b83f