如何清除模板缓存？-Java 学习之路

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

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

这是Angular 1的堆栈溢出问题的链接AngularJS disable partial caching on dev machine

下面是一个片段，当内容发生变化时，我遇到了 app.html 更新问题 .

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

9 回答

3
首先导入TemplateCompiler .
```
import { TemplateCompiler } from 'angular2/src/compiler/template_compiler';
```
接下来在构造函数中注入TemplateCompiler .
```
constructor(private _templateCompiler: TemplateCompiler)
```
最后用它来清除缓存 . 请注意，这会清除所有模板 .
```
this._templateCompiler.clearCache();
```
UPDATE: Angular 2 Beta 17

首先导入RuntimeCompiler .
```
import { RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler';
```
接下来在构造函数中注入RuntimeCompiler .
```
constructor(private _runtimeCompiler: RuntimeCompiler)
```
最后用它来清除缓存 . 请注意，这会清除所有模板 .
```
this._runtimeCompiler.clearCache();
```
UPDATE: Angular 2 RC 1

首先导入RuntimeCompiler .
```
import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler';
```
接下来在构造函数中注入RuntimeCompiler .
```
constructor(private _runtimeCompiler: RuntimeCompiler)
```
最后用它来清除缓存 . 请注意，这会清除所有模板 .
```
this._runtimeCompiler.clearCache();
```
UPDATE: Angular 2 RC 4

首先导入RuntimeCompiler .

Notice the path change from RC1. The path listed for RC1 will throw errors when calling .ClearCache() if used with RC4
```
import { RuntimeCompiler} from '@angular/compiler';
```
接下来在构造函数中注入RuntimeCompiler
```
constructor(private _runtimeCompiler: RuntimeCompiler)
```
最后用它来清除缓存 . 请注意，这会清除所有模板 .
```
this._runtimeCompiler.clearCache();
```
UPDATE: Angular 2.0.0 (RTM)

它无法完成 . 我有一个应用程序，为登录用户提供一组模板，另一组用于未登录的用户 . 升级到2.0.0后，我看不到完成相同任务的方法 . 虽然我试图找出重新构建应用程序的最佳方法，但我采用了这种方式：
```
location.reload();
```
这工作（但显然重新加载整个页面） .
回复于 2024-04-25T16:36:46+08:00
2
在 Angular 2.0.2 中，我们可以清除模板缓存，如下所示：

进口：
```
import { Compiler } from '@angular/core';
```
依赖注入器：
```
constructor(private _compiler: Compiler) {
}
```
用法：
```
this._compiler.clearCache();
```
注意：我相信这个解决方案适用于Angular 2.0.0（RTM）

Update

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

Explanation of functional purpose of clearcache() method:

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

clearCache() 对浏览器缓存没有任何操作，或Angular之外的任何操作，它只对 @Component ， @NgModule 等角色缓存起作用，仅此而已 .
回复于 2024-04-25T16:36:46+08:00
21

以下堆栈溢出问题提供了一个很好的策略，通过将版本参数附加到Url来解决此问题 .

Force browser to clear cache

这在理论上应该适用于生产环境版本 . 然后进行开发，我可以简单地禁用浏览器缓存 .

回复于 2024-04-25T16:36:46+08:00

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即可开始使用

回复于 2024-04-25T16:36:46+08:00

3

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

导入编译器：

import from '@angular/core';

在组件构造函数中注入Dependency：

constructor(private _compiler: Compiler) { }

清除缓存：

this._compiler.clearCache();

回复于 2024-04-25T16:36:46+08:00
0
我有类似的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'; .
回复于 2024-04-25T16:36:46+08:00
1

我只是将一个字符串附加到templateUrl以避免缓存 . 这是我的解决方案：https://csjdpw.atlassian.net/wiki/x/gCGWAg

回复于 2024-04-25T16:36:46+08:00
-3

更好的解决方案是捆绑所有必需的文件并生成单个.js文件，使用路径末尾的简单查询字符串（？v = 1.x）可以非常轻松地使其无效 . 欲了解更多信息，请查看此官方文件： Introduction to Webpack ：https://angular.io/docs/ts/latest/guide/webpack.html

回复于 2024-04-25T16:36:46+08:00
3

我认为最简单的方法是使用隐身模式打开一个新会话，因为没有任何缓存，所以它总是会强制重新加载 .

回复于 2024-04-25T16:36:46+08:00

如何清除模板缓存？

9 回答

相关问题