JHipster一知半解- 4.5.3 ng-jhipster

回文集目录:JHipster一知半解

拦截器interceptor目录（对@angular/http的封装)

http.interceptor.ts

包含一个抽象类JhiHttpInterceptor，该类由4个部分组成

private _successor: JhiHttpInterceptor = null;

一个内容success变量，指向链式拦截器组的下一个，一个接一个，就能构成一个链条。

processRequestInterception(options?: RequestOptionsArgs): RequestOptionsArgs {
        return (!this._successor) ? this.requestIntercept(options) :
            this._successor.processRequestInterception(this.requestIntercept(options));
    }

请求前拦截器调用，先调用自己，在调用successor的同等方法，为了实现这个目标，请求参数和返回值类型是一样的RequestOptionsArgs。

processResponseInterception(response: Observable<Response>): Observable<Response> {
        return (!this._successor) ? this.responseIntercept(response) :
            this._successor.processResponseInterception(this.responseIntercept(response));
    }

相应后拦截器调用，和请求是一样的方式。

abstract requestIntercept(options?: RequestOptionsArgs): RequestOptionsArgs;

abstract responseIntercept(observable: Observable<Response>): Observable<

两个抽象方法，子类通过实现它们完成拦截动作

interceptable-http.ts

Jhipster对@angular/http中Http的扩展，已适应自己定义的拦截链调用。

@Injectable()
//针对Http类的扩展
export class JhiInterceptableHttp extends Http {
    private firstInterceptor: JhiHttpInterceptor;

    constructor(
        backend: ConnectionBackend,
        defaultOptions: RequestOptions,
        @Inject(forwardRef(() => JhiHttpInterceptor)) interceptors: JhiHttpInterceptor[] // see the issue generator-jhipster#4794
    ) {
        // 正常构造http
        super(backend, defaultOptions);
        // 根据传入的interceptors数组，构造出拦截器链条，自己只需要记住第一个即可。
        if (interceptors && interceptors.length > 0) {
            interceptors.reduce((chain, current) => {
                chain.successor = current;
                return current;
            });

            this.firstInterceptor = interceptors[0];
        }
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        // 每个HTTP方法都会进入这个请求方法，因此，只要在这里统一拦截响应即可。
        return this.interceptResponse(super.request(url, options));
    }
    //先调用内部有拦截器的Request方法
    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return super.get(url, this.interceptRequest(url, RequestMethod.Get, options));
    }
    //其他post，put，delete，delete，head，options方法调用方法相同,略过。
    //必须先从url，head等中构造options，才能进行拦截调用。
    interceptRequest(url: string, method: RequestMethod, options?: RequestOptionsArgs, body?: any): RequestOptionsArgs {
        if (!options) {
            options = new RequestOptions();
        }

        if (!options.headers) {
            options.headers = new Headers();
        }

        options.url = options.url || url;
        options.method = options.method || method;
        options.body = options.body || body;

        return !this.firstInterceptor ? options : this.firstInterceptor.processRequestInterception(options);
    }
    //拦截响应就比较简单了，直接处理响应信息即可
    interceptResponse(observable: Observable<Response>): Observable<Response> {
        return !this.firstInterceptor ? observable : this.firstInterceptor.processResponseInterception(observable);
    }
}

该http应用在webapp\app\blocks\interceptor目录，这里替换了原生的http，用改造过的http作为整个网络通讯的http类。具体实现的拦截器页在这个目录。

语言language目录（对ngx-translate的封装）

jhi-missing-translation.config.ts

扩展MissingTranslationHandler，从注入的configService获取noi18nMessage作为无法查找到翻时候的显示。从前面的分析可以看出，这个是可以配置的的。

jhi-translate.directive.ts

这个指令可谓是到处都在使用了，jhipster强大的多语种支持，就得益于这个指令。

@Component({
    selector: '[jhiTranslate]',
    template: '<span [innerHTML]="jhiTranslate | translate:translateValues"></span>'
})
export class JhiTranslateComponent {

    @Input() jhiTranslate: string;

    @Input() translateValues: any;
}

从代码可以看出，其就是生成了一个<span>标签，内部使用translate管道进行翻译，
translateValues是translate管道的第二个参数，可以通过他传入对象，实现jjson中的{{}}插值表达式解析。
通过代码源码可以看到，在生成placeholder属性时候，就没办法用jhiTranslate属性指令了，这时候就必须用原生的translate管道。（其实其他地方都有translate，也基本没问题，jhiTranslate本身意义不大了，但是所以源码都去改translate还是比较麻烦的。

language.service.ts

其主要作用是通过注入的configService对标准的JhiLanguageService进行封装，初始值根据configService里面的配置进行初始化，并在里面增加登记当前的语种，切换后能进行转换。
比起之前ngx-translate没有完善时候的大量代码，现在JhiLanguageService仅仅做了一个薄封装，即兼容了之前的版本，一引入了新的特性。当然也有妥协的地方，原来是每个页面载入自己需要的部分语种json即可，现在是合并json文件后，一股脑下载整合整个语种，有利有弊吧。

init() {
        const config = this.configService.getConfig();
        this.currentLang = config.defaultI18nLang;
        this.translateService.setDefaultLang(this.currentLang);
        this.translateService.use(this.currentLang);
    }

    changeLanguage(languageKey: string) {
        this.currentLang = languageKey;
        this.configService.CONFIG_OPTIONS.defaultI18nLang = languageKey;
        this.translateService.use(this.currentLang);
    }

changeLanguage()方法，调用的地方比较多，在页面选择，用户资料编辑时候都有可能调用到。