$ templateCache в угловом2?

Question

Мне нужно эквивалентное решение для angular1.x $templateCache: В начале приложения мне нужно перевести и настроить все виды html в зависимости от профиля пользователя, роли, разрешений, языка и текущего местоположения. Я хочу выполнить это на стороне сервера с помощью синтаксиса и инструментов ASP.NET Razor в одном запросе (не в одном для каждого компонента). Этот запрос должен поместить все готовые к использованию шаблоны в кэш-память стороннего пользователя. С этого момента каждый компонент, который ссылается на свой шаблон, будет сначала загружен из этого кеша, если он доступен. В Angular1.x можно было легко загрузить весь шаблон в один запрос, разделенный <script id="myView.html" type="text/ng-template">...</script>. Перед тем, как поместить их в кеш, мне пришлось скомпилировать каждый шаблон, вызвав $compiler(). Как это сделать в Angular2? Одним из возможных решений я мог представить, если Angular2 поддерживает компонент templateUrl как function(). Таким образом, я мог бы создать собственный кеш.

Answer 1

После некоторого исследования и копания в исходном коде angular2, этот $templateCache in Angular 2? указал мне на правильное решение. Я должен зарегистрировать новый НТТР и собственную реализацию 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] 
       })], 

XHRInterceptor (реализация интерфейса XHR) впрыскивается и внутренне используемый angular2 каждый раз angular2 загружает HTML temlates через tempateUrl Compontent в. Поскольку мы вводим нашу собственную реализацию Http в XHRInterceptor конструктору и передавать все получают запросы через 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; 
    } 
}