私は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()
としてサポートしていると思います。この方法で私は自分のキャッシュを構築することができました。
1
A
答えて
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;
}
}
関連する問題
- 1. $ templatecacheと$ routeprovider - 404
- 2. スクリプトタグ経由で$ templateCacheを使用
- 3. バンドル後の相対templateUrlsの角度$ templateCache 404エラー
- 4. $ templateCacheが動作しない状態の設定方法
- 5. $ templateCacheがAngular.jsのangular-configで動作しません
- 6. Angpack + templateCacheでWebpackを使用するには?
- 7. 角度1.xで$ templateCacheをui-routerとuglifyで使用する
- 8. $ templateCacheはファイルを取得しません(オブジェクト{id: "templates"、size:0})?
- 9. 角度1.xのtemplateCacheは別のファイルからコンテンツを入れます
- 10. gulp-angular-templatecache角度テンプレートの配管時にエラーが発生する
- 11. gulp-angular-templatecacheこのようなファイルやディレクトリがない、lstat 'templates.js'エラー
- 12. angular2は、クラスangular2
- 13. gulpでtemplateCacheを削除するにはどうすればよいですか?
- 14. $ templateCacheを使用せずにui-gridで集約行を削除する方法
- 15. AngularJS:Videogularテンプレートを取得$ templateCacheに保存されている404は、エラー
- 16. Angular templatecacheからテンプレートを読み込めません。役に立たないエラー
- 17. $ templateCacheからAngular 1を使用してイメージをロードするには
- 18. angular2のRC6 - angular2クイックスタートページでサブフォルダ/ SRC /アプリ
- 19. Angular2 npmモジュールの書き方 - Angular2 RC 6
- 20. angular2する新しいangular2
- 21. angular2 CLIとangular2-adalエラー
- 22. Angular2アニメーションがAngular2アプリで
- 23. Angular2
- 24. - Angular2
- 25. Angular2 -
- 26. angular2
- 27. Angular2
- 28. angular2
- 29. angular2
- 30. angular2