Question

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

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

所以我的申请路径就像website.com/#/home和website.com/#/profile

应用程序运行正常，但我遇到Internet Explorer 11中的一个问题（我必须支持）：角度变化检测似乎没有完全正常工作。具体来说，如果我对组件进行UI更改，导航到另一个路径，然后返回，则会显示旧视图。路由工作正常，但就好像浏览器缓存了视图并且不会让Angular更新组件视图。

不确定在哪里开始寻找原因，更不用说修复了。

Answer 1

以下是如何设置时间戳

的示例

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);
}

Answer 2

@DiabolicWords让我明白这个问题严格来说是一个Internet Explorer缓存问题（IE 11缓存XHR Get响应），我决定在每个XHR Get请求中发送一个唯一的查询参数值。

我使用了an HttpInterceptor

@Injectable()
export class NonceQueryParamInterceptor implements HttpInterceptor {

  constructor(private utility: UtilityService) {}

  public intercept(req: HttpRequest<any>, next: HttpHandler) {

    // Checks whether this is IE, and this is a GET request
    if (this.utility.isNoCacheParamNeeded(req, navigator.userAgent)) {

      const modifiedRequest = req.clone(
          {setParams: {nocache: Date.now().toString()}}
      );

      return next.handle(modifiedRequest);

    } else {
      return next.handle(req);
    }
  }
}

然后我需要向应用程序提供者注册拦截器

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

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

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

2 个答案: