angular2 中的 $templateCache？答案

【问题标题】：$templateCache in angular2?angular2 中的 $templateCache？
【发布时间】：2016-08-26 19:56:36
【问题描述】：

我需要 angular1.x $templateCache 的等效解决方案：在应用程序启动时，我必须根据用户的个人资料、角色、权限、语言和当前位置来翻译和配置所有 html 视图。我想在服务器端使用 ASP.NET Razor 语法和工具在一个请求中完成此操作（而不是每个组件都在一个请求中）。此请求应将所有准备使用的模板放入 angular2 客户端缓存中。从现在开始，每个引用其模板的组件都将首先从此缓存中提供服务（如果可用）。在 Angular1.x 中，很容易在一个请求中加载所有模板，由<script id="myView.html" type="text/ng-template">...</script> 分隔。在将它们放入缓存之前，我必须通过调用$compiler() 来编译每个模板。我怎样才能在 Angular2 中做到这一点？我可以想象的一种可能的解决方案是，如果 Angular2 支持组件的templateUrl 作为function()。这样我就可以建立自己的缓存了。

【问题讨论】：

标签： caching angular angular2-template

【解决方案1】：

经过更多研究并深入研究 angular2 源代码后，$templateCache in Angular 2? 为我指出了正确的解决方案。我必须通过 provide() 注册一个新的自定义 Http 和一个自定义 XHR 实现：

 providers: [HTTP_PROVIDERS, 
                provide(Http, {
                        useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new HttpInterceptor(xhrBackend, requestOptions),
                        deps: [XHRBackend, RequestOptions]
                    }),
                provide(XHR, { 
                    useFactory: (http: Http) => new XHRInterceptor(http), deps: [Http] 
                })],

每次 angular2 通过 Compontent 的 tempateUrl 加载 html 模板时，都会注入 XHRInterceptor（XHR 接口的实现）并在内部使用。因为我们将自定义 Http 实现注入 XHRInterceptor 构造函数并通过 HttpInterceptor 委托所有 get 请求，所以我们可以完全控制来自应用程序的所有 http 请求：

export class XHRInterceptor extends XHR {
    constructor(private _http: Http) {
        super()
    }
    get(url: string): Promise<string> {
        var completer: PromiseCompleter<string> = PromiseWrapper.completer();
        this._http.get(url).map(data=> {
            return data.text();
        }).subscribe( data => {
            completer.resolve(data);
        }, error=>{
            completer.reject(`Failed to load ${url}`, null);
        });
        return completer.promise;
    }
}

这是我的 HttpInterceptor 类：

export class HttpInterceptor extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        if (typeof url === "string") {
            return this.interceptResult(super.request(this.interceptUrl(url), this.interceptOptions(options)));
        } else {
            return this.interceptResult(super.request(url, this.interceptOptions(options)));
        }
    }
    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.interceptResult(super.get(this.interceptUrl(url), this.interceptOptions(options)));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.interceptResult(super.post(this.interceptUrl(url), body, this.interceptOptions(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.interceptResult(super.put(this.interceptUrl(url), body, this.interceptOptions(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.interceptResult(super.delete(this.interceptUrl(url), this.interceptOptions(options)));
    }

    interceptUrl(url: string): string {
        // Do some stuff with the url....
        //...
        return url;
    }

    interceptOptions(options?: RequestOptionsArgs): RequestOptionsArgs {
        // prepare options...
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }

        // insert some custom headers...
        // options.headers.append('Content-Type', 'application/json');

        return options;
    }

    interceptResult(observable: Observable<Response>): Observable<Response> {
        // Do some stuff with the result...
        // ...
        return observable;
    }
}

【讨论】：