angular2の$ templateCache？

Question

私はangular1.x $templateCacheのための同等の解決策が必要です： 私は、ユーザーのプロファイル、役割、アクセス許可、言語と現在の場所に応じてすべてのHTMLビューを翻訳し、設定する必要があります。私は、ASP.NET Razorの構文とツールを1つのリクエスト（各コンポーネントに1つずつではない）でサーバー側で実行したいと考えています。このリクエストは、使用可能なすべてのテンプレートをangular2クライアントサイドキャッシュに配置する必要があります。これ以降、テンプレートを参照するすべてのコンポーネントは、利用可能であれば、最初にこのキャッシュから提供されます。 Angular1.xでは、1つのリクエストですべてのテンプレートを<script id="myView.html" type="text/ng-template">...</script>で区切ってロードするのは簡単でした。それらをキャッシュに入れる前に、私は$compiler()を呼び出して各テンプレートをコンパイルしなければなりませんでした。 これはどのようにしてAngular2で達成できますか？ Angular2がComponentのtemplateUrlをfunction()としてサポートしていると思います。この方法で私は自分のキャッシュを構築することができました。

Answer 1

angle2のソースコードをさらに調査して掘り下げた後、この$templateCache in Angular 2?は私に適切な解決策を教えてくれました。

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] 
       })], 

XHRInterceptor（XHRインタフェースの実装）を注入し、内部CompontentのtempateUrl経由angular2たびangular2負荷HTML temlatesで使用されている：私は、新しいカスタムHTTPと（提供を通じてカスタムXHR実装）を登録する必要があります。我々はXHRInterceptorコンストラクタとデリゲートに私たちのカスタムHTTP実装を注入するので、すべてがHttpInterceptorを通じて要求を取得し、我々は我々のアプリケーションからのすべての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; 
    } 
}