• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Angular 个人深究(一)【Angular中的Typescript 装饰器】

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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; }

注:期待有大神能够看到我的文章,并提出我的问题所在,小白一枚如果有错误还望指正。在此谢过。

 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
5分钟了解TypeScript发布时间:2022-07-18
下一篇:
TypeScript体系调研报告发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap