如何清除模板缓存？

Question

在Angular 2中,如何清除模板缓存？Angular 1有很多答案,但是没有2个答案.

我遇到的问题是,当我更改templateUrl任何组件引用的html页面的内容时,html页面在浏览器中不会更改,直到我手动导航到templateUrl浏览器并点击重新加载.我知道您可以在开发过程中禁用浏览器缓存来解决这个问题,但我担心的是,当我使用Angular 2更新网站时,如果用户将其缓存在浏览器中,用户可以看到过时的html页面.

以下是Angular 1 AngularJS在开发机器上禁用部分缓存的堆栈溢出问题的链接

下面是一个片段,我在app.html更改其内容时遇到更新问题.

@Component({
    selector: 'photogallery-app',
    templateUrl: './app/app.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})

Answer 1

首先导入TemplateCompiler.

import { TemplateCompiler } from 'angular2/src/compiler/template_compiler';

接下来在构造函数中注入TemplateCompiler.

constructor(private _templateCompiler: TemplateCompiler)

最后用它来清除缓存.请注意,这会清除所有模板.

this._templateCompiler.clearCache();

更新:Angular 2 Beta 17

首先导入RuntimeCompiler.

import { RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler';

接下来在构造函数中注入RuntimeCompiler.

constructor(private _runtimeCompiler: RuntimeCompiler)

最后用它来清除缓存.请注意,这会清除所有模板.

this._runtimeCompiler.clearCache();

更新:Angular 2 RC 1

首先导入RuntimeCompiler.

import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler';

接下来在构造函数中注入RuntimeCompiler.

constructor(private _runtimeCompiler: RuntimeCompiler)

最后用它来清除缓存.请注意,这会清除所有模板.

this._runtimeCompiler.clearCache();

更新:Angular 2 RC 4

首先导入RuntimeCompiler.

注意RC1的路径变化.如果与RC4一起使用,则在调用.ClearCache()时,为RC1列出的路径将抛出错误

import { RuntimeCompiler} from '@angular/compiler';

接下来在构造函数中注入RuntimeCompiler

constructor(private _runtimeCompiler: RuntimeCompiler)

最后用它来清除缓存.请注意,这会清除所有模板.

this._runtimeCompiler.clearCache();

更新:Angular 2.0.0(RTM)

它无法完成.我有一个应用程序为登录用户提供一组模板,另一组用于未登录的用户.升级到2.0.0后,我看不到完成相同任务的方法.虽然我试图找出重新构建应用程序的最佳方法,但我采用了这种方式:

location.reload();

这工作(但显然重新加载整个页面).

Answer 2

在Angular 2.0.2中,我们可以清除模板缓存,如下所示:

进口:

import { Compiler } from '@angular/core';

依赖注入器:

constructor(private _compiler: Compiler) {
}

用法:

this._compiler.clearCache();

注意:我相信这个解决方案适用于Angular 2.0.0(RTM)

更新

在Angular clearCache()for的当前版本(4.x)中不再有效.这已经在Angular Github(@Olezt)中报告过,并且将来可能会得到纠正.

clearcache()方法功能说明:

即不清楚另一个问题是的功能性目的clearCache()的方法,clearCache()具有除去的责任templateUrl,stylesUrl等中规定@Component.(我用它来丢弃加载的视图templateUrl并请求更新的服务器视图,在我的项目中,根据交换用户/权限更改了此请求产生的视图.因此需要丢弃先前加载的视图.)

clearCache()对浏览器缓存或任何超越角不采取行动,它只作用于@Component,@NgModule等角度缓存,仅此而已.

Answer 3

在 Angular 5.X 中，我们可以像 2.0 一样使用编译器。

导入编译器：

从“@angular/core”导入{编译器}；

在组件构造函数中注入依赖项：

构造函数（私有_compiler：编译器）{}

清除缓存：

this._compiler.clearCache();