来自 软件资讯 2019-10-01 08:20 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

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中的装饰器

关键词: