来自 奥门威尼斯网址 2019-11-14 16:47 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

【奥门威尼斯网址】angular中的装饰器

 

Angular中的装饰器是一个函数,它将元数据添加到类、类成员(属性、方法)和函数参数。
用法:要想应用装饰器,把它放到被装饰对象的上面或左边
Angular 使用自己的一套装饰器来实现应用程序各部件之间的相互操作
这个地方是前面几个模块模块、指令、组件、依赖注入等从装饰器这个侧面的整理
你需要做的:
1.搞清楚理解TypeScript的装饰器的原理
2.搞清楚这里面每一个装饰器的作用,解决的什么问题,应用场景
类装饰器******
Angular 有很多装饰器,它们负责把元数据附加到类上,以了解那些类的设计意图以及它们应如何工作。
类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。
类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。
@Component标记类作为组件并收集组件配置元数据(继承Directive) @Directive标记类作为指令并收集组件配置元数据
声明当前类是一个指令,并提供关于该指令的元数据
@Pipe******
声明当前类是一个管道,并且提供关于该管道的元数据
@Injectable标记元数据并可以使用Injector注入器注入
声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。
@NgModule******
NgModule是一个装饰器函数,它
接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations -声明本模块中拥有的视图
。(Angular有三种视图类:组件、指令和管道?。)
exports - declarations的子集,可用于其它模块的
组件[模板](
imports -本模块声明的组件模板需要的类所在的其它
模块。Ps:模块导入声明
providers -服务的创建者,并加入到全局服务列表中,可用于应用任何部分。????完全没懂说啥
bootstrap -指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
**属性装饰器******
属性装饰器表达式会在运行时当作函数被调用,
传入下列2个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
**@Input******
声明一个输入属性,以便我们可以通过属性绑定更新它。
**@Output******
声明一个输出属性,以便我们可以通过事件绑定进行订阅。
**@Hostbinding********把宿主元素的属性(比如CSS类)绑定到指令/组件的属性******
**@HostListener******
通过指令/组件的方法订阅宿主元素的事件
@ContentChild配置一个内容查询 @ViewChild配置一个视图查询 @ContentChildren配置多个个内容查询(返回QueryList类型) @ViewChildren配置多个视图查询(返回QueryList类型) 参数装饰器******
参数装饰器表达式会在运行时当作函数被调用,
传入下列3个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
参数在函数参数列表中的索引。
注意参数装饰器只能用来监视一个方法的参数是否被传入。**
@Inject指定依赖关系的参数装饰器(一般用来注入被标记Injectable的类)
@Optional将依赖项标记为可选的参数元数据. 如果没有找到依赖关系,注射器将提供null
@Self指定注射器只能从本身检索依赖关系****
@SkipSelf指定注射器只能从父类检索依赖关系****
@Host按照依赖关系来检索

一、在app.module.ts模块中,注入JsonpModule模块

import {JsonpModule} from "@angular/http";

@NgModule({
    imports: [
        JsonpModule    //注入JSonpModule模块
    ]
})

二、创建服务httpService,并注入jsonp和map(分装好的服务 可以直接调用)

import {Injectable} from '@angular/core';
import {Jsonp, URLSearchParams} from "@angular/http";

@Injectable()
export class HttpService {

    private jsonpTimes = 0;   // 用于记录jsonp请求的次数

    constructor(private jsonp: Jsonp) {

    }

    jsonpGet(apiURL, req){
        let params = new URLSearchParams();
        //设置参数
        for (let key in req) {
            params.set(key, req[key]);
        }
        params.set('format', 'json');
        params.set("callback", `__ng_jsonp__.__req${this.jsonpTimes}.finished`);
        this.jsonpTimes++;

        let request = this.jsonp.get(apiURL, { search: params })
            .map((res) => {
                let response = res.json();
                return response;
            });
        return request;
    }

}

 

本文由威尼斯国际官方网站发布于奥门威尼斯网址,转载请注明出处:【奥门威尼斯网址】angular中的装饰器

关键词: