angular2 - angular中基类使用了依赖注入，在所有子类继承时都要注入，父级一旦修改，所有子类都要更改，不灵活啊

问题描述

问 题

使用的是angular2

1.我习惯将公共的方法抽象到基类中如下：

import { Injectable, EventEmitter } from '@angular/core';
import { Http, Response, Headers, Jsonp, URLSearchParams } from '@angular/http';
import { Observable, Subject } from "rxjs";
import { serverRes } from './base.struct';
import { errorCode } from '../../common/param';
import { Router } from "@angular/router";
@Injectable()
export class BaseService {
    constructor(
        private jsonp: Jsonp,
        private baseHttp: Http,
        private go:Router
    ) { }
    handleError(error: Response | any) {
        console.error("baseService received request errorr");
        console.log(error);
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        Observable.throw(errMsg);
        return false;
    }
    createRequstParam(data: any, jsonp = false): any {
        let params = new URLSearchParams();
        for (let key in data) {
            params.set(key, data[key])
        }
        if (jsonp == true) {
            params.set('callback', 'JSONP_CALLBACK');
        }
        return params;
    }
    createHeaders() {
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        return headers;
    }
    checkResponeCode(res: Response) {
        //this.questStaus.questStatus.emit("remove");
        let serverResponse = res.json() as serverRes
        if (serverResponse.code != errorCode.CODE_OK) {
            console.error("请求代码不是OK，error code is " + serverResponse.code);
            console.error(serverResponse.desc)
        }
        if (serverResponse.code == errorCode.CODE_NOT_LOGIN || serverResponse.code == errorCode.CODE_EXPIRE) {
            //this.goToPage.navigateByUrl("/view/login");
        }
        return serverResponse;
    }
    queryServer(query: { url: string, method: string }, param = {}): Promise<any> {
        //this.questStaus.questStatus.emit("add");
        let form = this.createRequstParam(param);
        switch (query.method) {
            case "post":
                return this.baseHttp.post(query.url, form, { headers: this.createHeaders() }).toPromise().then(this.checkResponeCode.bind(this)).catch(this.handleError);
            case "get":
            default:
                return this.baseHttp.get(query.url, { search: form }).toPromise().then(this.checkResponeCode.bind(this)).catch(this.handleError);
        }
    }
    changeAttribut(arr: [any], id: number, name: string, value: any): string | number {
        for (let key in arr) {
            if (arr[key].id == id) {
                arr[key][name] = value;
                return key;
            }
        }
        return '';
    }
}

子类如下：

import { Injectable } from '@angular/core';
import {BaseService} from '../base/base.service';
import { Http,Jsonp,} from '@angular/http';
import { Router } from "@angular/router";
@Injectable()
export class AreaService extends BaseService{

    constructor(private thishttp:Http,private thisjsonp:Jsonp,private rout:Router) {
        super(thisjsonp,thishttp,rout);
    }

}

这样写的缺点就是我一旦修改了基类的注入，所有子类全部都需要修改，十分麻烦不灵活，想过，直接实例化这些类，但是水平不够，失败了，还有什么别的方法吗？

解决方案

使用Injector，然后子类只需要注入一个Injector并传给基类就可以了，基类需要的其他注入通过Injector进行
基类注入的类型使用protected描述符，这样子类也可以直接调用

基类

abstract class BaseService {
  protected http: Http;
  protected router: Router;
  constructor (private baseInjector: Injector) {
    this.http = this.baseInjector.get(Http);
    this.router = this.baseInjector.get(Router);
  }
  // ...
}

子类

@Injectable()
export class AreaService extends BaseService {
  constructor(private injector: Injector) {
    super(injector);
  }
}

这篇关于angular2 - angular中基类使用了依赖注入，在所有子类继承时都要注入，父级一旦修改，所有子类都要更改，不灵活啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！