在Angular 2中,如何清除模板缓存? Angular 1有很多答案,但是没有2个答案。
我遇到的问题是,当我在任何组件上更改templateUrl
引用的html页面的内容时,html页面不会在浏览器中更改,直到我手动导航到{{ 1}}在浏览器中点击重新加载。我知道您可以在开发过程中禁用浏览器缓存来解决这个问题,但我担心的是,当我使用Angular 2更新网站时,如果用户将其缓存在浏览器中,则会看到过时的html页面。
这是Angular 1的堆栈溢出问题的链接 AngularJS disable partial caching on dev machine
以下是一个代码段,我在更新内容时遇到templateUrl
更新问题。
app.html
答案 0 :(得分:21)
首先导入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的路径更改。 RC1中列出的路径在调用时会抛出错误.ClearCache()如果与RC4一起使用
import { RuntimeCompiler} from '@angular/compiler';
接下来在构造函数中注入RuntimeCompiler
constructor(private _runtimeCompiler: RuntimeCompiler)
最后用它来清除缓存。请注意,这会清除所有模板。
this._runtimeCompiler.clearCache();
更新:Angular 2.0.0(RTM)
无法做到。我有一个应用程序,为登录用户提供一组模板,另一组用于未登录的用户。升级到2.0.0后,我看不到完成相同任务的方法。虽然我试图找出重新构建应用程序的最佳方法,但我采用了这个方法:
location.reload();
可行(但显然会重新加载整个页面)。
答案 1 :(得分:13)
在 Angular 2.0.2 中,我们可以按如下方式清除模板缓存:
导入:
import { Compiler } from '@angular/core';
依赖注入者:
constructor(private _compiler: Compiler) {
}
用法:
this._compiler.clearCache();
注意:我相信此解决方案适用于 Angular 2.0.0(RTM)
<强>更新强>
当前版本(4.x)的Angular
clearCache()
for不再有效。这已经是reported in the Angular Github(来自@Olezt),将来可能会更正。
clearcache()
方法的功能目的说明:
另一个不清楚的问题是clearCache()
方法的功能目的,clearCache()
有责任删除templateUrl
中指定的stylesUrl
,@Component
等。 1}}。 (我用它来丢弃templateUrl
中加载的视图并请求更新的服务器视图,在我的项目中,根据交换用户/权限更改了此请求产生的视图。所以需要丢弃一个先前加载的。)
clearCache()
对浏览器缓存或Angular以外的任何内容都没有操作,它只对@Component
,@NgModule
等角色缓存执行操作。
答案 2 :(得分:3)
以下堆栈溢出问题提供了一个很好的策略,可以通过将版本参数附加到Url来解决此问题。
理论上这应该适用于生产版本。然后进行开发,我可以简单地禁用浏览器缓存。
答案 3 :(得分:3)
gulpfile.js
var gulp = require('gulp'),
replace = require('gulp-replace');
gulp.task('release', function() {
// cache busting for html
gulp.src([app/**'])
.pipe(replace(/\.html.*'/g, '.html?v' + Date.now() + "'"))
.pipe(gulp.dest('web/app'));
// cache busting for js
gulp.src(['main.html'])
.pipe(replace(/version = (\d+)/g, 'version = ' + Date.now()))
.pipe(gulp.dest('src/AppBundle/Resources/views'));
});
main.html中
<html>
<head>
<script src="{{ asset('js/systemjs.config.js') }}"></script>
<script>
var systemLocate = System.locate,
version = 1477001404442;
System.locate = function(load) {
var System = this;
return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
return address + System.cacheBust;
});
};
System.cacheBust = '?v=' + version;
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
</html>
任何-component.ts
@Component({
selector: 'any-selector',
templateUrl: '/app/template.html'
})
然后只需执行gulp release即可开始使用
答案 4 :(得分:3)
在Angular 5.X中,我们可以以与2.0相同的方式使用编译器。
导入编译器:
从“ @ angular / core”导入{编译器};
在您的组件构造函数中注入依赖项:
构造函数(私有_compiler:编译器){ }
清除缓存:
this._compiler.clearCache();
答案 5 :(得分:2)
我有一个类似的question。作为一个快速入侵,我通过在开发时引入一个像export var fileVersion = '?tmplv=' + Date.now();
这样的模块中的全局变量来解决这个问题 - 并将其更改为生产 - 并在以下组件中使用它:
@Component({
selector: 'my-component',
templateUrl: '/app/templates/my-component.html' + fileVersion,
})
所以我只需刷新浏览器即可查看更改。在生产中使用export var fileVersion = '?tmplv=v1.3.7yourVersionNumber';
。
答案 6 :(得分:1)
我只是将一个字符串附加到templateUrl以避免缓存。这是我的解决方案:https://csjdpw.atlassian.net/wiki/x/gCGWAg
答案 7 :(得分:0)
更好的解决方案是捆绑所有必需的文件并生成单个.js文件,使用路径末尾的简单查询字符串(?v = 1.x)可以非常轻松地使其无效。有关更多信息,请查看此官方文档: Webpack简介:https://angular.io/docs/ts/latest/guide/webpack.html
答案 8 :(得分:-3)
我认为最简单的方法是使用隐身模式打开一个新会话,因为没有任何内容被缓存,所以它总会强制重新加载。