Installation(安装)

使用 npm or yarn

建议使用npm或yarn来安装，它不仅使开发更容易，而且还允许您利用丰富的Javascript包和工具生态系统。

使用

• 第一步 --- 安装

$ npm install @jd/decorator --save

$ yarn add @jd/decorator

• 第二步 --- 导入装饰器模块 (AppModule.ts)

import {JdDecoratorModule} from '@jd/decorator'; 
import {NgModuler} from '@angular/core';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    JdMessageModule,
    HttpClientModule,
    JdDecoratorModule.forRoot({
      message: HttpMessageService, // 全局信息提示
      defaultConfigForHttp: {
        SERVICE_URL: '后台根地址',
        API_VERSION: 'api版本 可选',
        apiPrefix: 'api前缀 可选'
      },
      httpRegistered: HttpRegistered // 全局 api 映射
    })
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

// 全局 api 映射
import {GetAndAutoSubscribe, HttpDefaultConfig} from '@jd/decorator'; 
export class HttpRegistered {
  @GetAndAutoSubscribe({api: '/orders', successMsg: '测试成功', isShowMsg: true})
  addOrder: HttpDefaultConfig;

  constructor() {
  }
}

// 全局信息提示
import {JdHttpMessage} from '@jd/decorator'; 
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class HttpMessageService extends JdHttpMessage<JdMessageDataFilled> {

  constructor(private _msg: JdMessageService) {
    super();
  }

  error(content: string): JdMessageDataFilled {
    // this._msg.error(content);
    return this._msg.error(content);
  }

  info(content: string): JdMessageDataFilled {
    return undefined;
  }

  loading(content: string): JdMessageDataFilled {
    return undefined;
  }

  remove(content: JdMessageDataFilled): void {
  }

  success(content: string): JdMessageDataFilled {
    return this._msg.success(content);
  }

  warning(content: string): JdMessageDataFilled {
    return this._msg.warning(content);
  }
}

• 第三步 --- 正式使用

import {
  Delete,
  GetAndAutoSubscribe,
  getGlobalUrl,
  HttpClientOptions,
  PostAndAutoSubscribe,
  PutAndAutoSubscribe,
  ResponseResult,
  HttpSuccessResult
} from '@jd/decorator';
  /* --------------------------------------------- API 公司代码  --------------------------------------------------------------- */
  // Get请求 并自动订阅  与之对应的装饰器是Get(需要手动订阅 手动释放资源)
  // 建议使用 GetAndAutoSubscribe 除非非这样不可
  // successMsg是成功后的提示  如果转换为布尔时为false 则使用服务端返回的message
  // executeMsg 是执行时的提示
  @GetAndAutoSubscribe({api: '/customers/getCustomerCodeName'})
  getCustomerNo(options?: HttpClientOptions, @HttpResult() res?: ResponseResult) {
    if (res.success) {
      this.dyForm.updateSelectContentByKey('customer_no', res.data);
    }
  }

  /* --------------------------------------------- API 修改产品  --------------------------------------------------------------- */
  // Put请求 并自动订阅  与之对应的装饰器是Put(需要手动订阅 手动释放资源)
  // 建议使用 PutAndAutoSubscribe 除非非这样不可
  // successMsg是成功后的提示  如果转换为布尔时为false 则使用服务端返回的message
  // executeMsg 是执行时的提示
  // @HttpSuccessResult() 如果该请求失败 则该方法则不会执行 也就不用手动判断该方法是否成功了
  // 与之对应的装饰器 @HttpResult() 无论该请求是否成功 该方法都会在成功或失败时被调用
  // 也就是说需要手动判断是否成功  再处理之后的逻辑
  // api 为接口名称
  @PutAndAutoSubscribe({api: '/products', successMsg: '', executeMsg: '更新产品...'})
  updateProductH(@HttpOptions() options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
    this.updateResult = res.data;
    if (Object.keys(this.declarationel).length > 5 && !this.isSave) {
      this.addDeclaration({body: Object.assign({}, this.declarationel, {action_flg: 1})});
    }
  }

  /* --------------------------------------------- API 新增历史申报要素 ----------------------------------------------------------- */
  // Post请求 并自动订阅  与之对应的装饰器是Post(需要手动订阅 手动释放资源)
  // 建议使用 PostAndAutoSubscribe 除非非这样不可
  // successMsg是成功后的提示  如果转换为布尔时为false 则使用服务端返回的message
  // executeMsg 是执行时的提示
  @PostAndAutoSubscribe({api: '/HD', isShowMsg: true, successMsg: '', executeMsg: '新增历史要素...'})
  addDeclaration(@HttpOptions() options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
    if (res.success) {
      // this.updateResult = res.data;
    }
  }
  /* ----------------------------------------------- API 删除图片 ------------------------------------------------------------- */
  @Delete({api: '/imgs', isShowMsg: true, successMsg: '', executeMsg: '删除图片...', isAutoSubscribe: true})
  deleteImg(@HttpOptions() options?: HttpClientOptions, @HttpResult() res?: ResponseResult) {
    if (res.success) {
      this.updateImgs = this.updateImgs.filter(value => +value.id !== +res.data.id);
      this.uploadImgs.ids = this.uploadImgs.ids.filter(value => +value !== +res.data.id);
    }
  }
  
  @HttpApi('test')
  addOrder(options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
   // this.OnCompleted.emit();
   console.log(res);
  }