Angular 角度5：哈希路由使IE无法更新视图

在我的用例中（Angular 5应用嵌入到更大的网站中），我使用的是哈希定位策略

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})]
})

因此，我的应用程序路径类似于

website.com/#/home

和

website.com/#/profile

该应用程序工作正常，但我在InternetExplorer11中遇到了一个问题（我必须支持这个问题）：角度变化检测似乎并没有完全工作。具体地说，如果我对组件进行UI更改，导航到另一个路径，然后返回，将显示旧视图。布线工作正常，但就好像浏览器缓存了视图，而不允许Angular更新零部件视图一样

---

甚至不知道从哪里开始寻找原因，更不用说修复了。

下面是一个如何设置时间戳的示例

private requestOptions: RequestOptionsArgs = {};
private requestUrlSearchParams = new URLSearchParams();

setSearchParamsTimeStamp() {
    this.requestUrlSearchParams.set('timestamp', (new Date()).getTime().toString());
    this.requestOptions.search = this.requestUrlSearchParams;
}

// an example method
public deleteData<T>(url: string, logText: string): Promise<T> {
    this.setSearchParamsTimeStamp();
    this.logger.info(this.name + logText);

    return this.http.delete(url,
        {
            headers: this.jsonHeaders,
            search: this.requestUrlSearchParams,
        })
        .toPromise()
        .then(() => null)
        .catch(this.handleError);
}

private-requestOptions:RequestOptionsArgs={}；
private requestUrlSearchParams=新的URLSearchParams（）；
setSearchParamsTimeStamp（）{
this.requestUrlSearchParams.set（'timestamp'，（new Date（））.getTime（）.toString（））；
this.requestOptions.search=this.requestUrlSearchParams；
}
//示例方法
公共删除数据（url:string，logText:string）：承诺{
这个.setSearchParamsTimeStamp（）；
this.logger.info（this.name+logText）；
返回此.http.delete（url，
{
headers:this.jsonHeaders，
搜索：this.requestUrlSearchParams，
})
.toPromise（）
。然后（（）=>null）
.接住（这个.把手错误）；
}

下面是一个如何设置时间戳的示例

private requestOptions: RequestOptionsArgs = {};
private requestUrlSearchParams = new URLSearchParams();

setSearchParamsTimeStamp() {
    this.requestUrlSearchParams.set('timestamp', (new Date()).getTime().toString());
    this.requestOptions.search = this.requestUrlSearchParams;
}

// an example method
public deleteData<T>(url: string, logText: string): Promise<T> {
    this.setSearchParamsTimeStamp();
    this.logger.info(this.name + logText);

    return this.http.delete(url,
        {
            headers: this.jsonHeaders,
            search: this.requestUrlSearchParams,
        })
        .toPromise()
        .then(() => null)
        .catch(this.handleError);
}

private-requestOptions:RequestOptionsArgs={}；
private requestUrlSearchParams=新的URLSearchParams（）；
setSearchParamsTimeStamp（）{
this.requestUrlSearchParams.set（'timestamp'，（new Date（））.getTime（）.toString（））；
this.requestOptions.search=this.requestUrlSearchParams；
}
//示例方法
公共删除数据（url:string，logText:string）：承诺{
这个.setSearchParamsTimeStamp（）；
this.logger.info（this.name+logText）；
返回此.http.delete（url，
{
headers:this.jsonHeaders，
搜索：this.requestUrlSearchParams，
})
.toPromise（）
。然后（（）=>null）
.接住（这个.把手错误）；
}

在@DiabolicWords让我明白这个问题完全是Internet Explorer缓存问题（即11个缓存XHR Get响应）之后，我决定在每个XHR Get请求中发送一个唯一的查询参数值

我曾经

---

注册HttpInterceptor可确保整个应用程序中的所有请求都会通过以下逻辑：

在@DiabolicWords让我了解到问题完全是Internet Explorer缓存问题（即11个缓存XHR Get响应）之后，我决定在每个XHR Get请求中发送一个唯一的查询参数值

我曾经

---

注册HttpInterceptor确保了整个应用程序中的所有请求都将通过以下逻辑：

对于IE11来说，缓存实际上是一团乱麻。但这实际上与useHash无关。浏览器的缓存行为是困扰我们的。我们遇到了同样的问题，不得不重新编写应用程序以应对IE11的缓存策略。@DiabolicWords我将useHash引入讨论，因为似乎如果我使用路径路由策略，这种行为会消失多年me@DiabolicWords你是如何解决这个问题的？我认为正确的解决方案是设置

缓存控制

响应头，但我无法更改API发送的内容，只能更改Angular在浏览器中的操作。我们简单地将时间戳作为查询参数附加到每个被调用的URL，以便每次都有一个唯一的URL字符串。就IE11而言，缓存实际上是一团糟。但这实际上与useHash无关。浏览器的缓存行为是困扰我们的。我们遇到了同样的问题，不得不重新编写应用程序以应对IE11的缓存策略。@DiabolicWords我将useHash引入讨论，因为似乎如果我使用路径路由策略，这种行为会消失多年me@DiabolicWords你是如何解决这个问题的？我认为正确的解决方案是设置

缓存控制

响应头，但我无法更改API发送的内容，只能更改Angular在浏览器中的操作。我们简单地将时间戳作为查询参数附加到每个被调用的URL，以便每次都有一个唯一的URL字符串。成功了。谢谢分享你的代码+1.注意：这使用了弃用的

angular/http

。我得出了相同的结论并应用了相同的解决方案，但是使用

angular/common/http

包，不客气。谢谢你的额外建议；我刚刚发布了我找到的解决方案。谢谢分享你的代码+1.注意：这使用了弃用的

angular/http

。我得出了相同的结论并应用了相同的解决方案，但是使用

angular/common/http

包，不客气。谢谢你的额外建议；我刚刚发布了我找到的解决方案。

@NgModule({
  declarations: [AppComponent],
  providers: [{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: NonceQueryParamInterceptor, multi: true 
  }]
})
export class AppModule {}