路由更改时角度重置 TransferState 数据答案

【问题标题】：Angular reset TransferState data on route change路由更改时角度重置 TransferState 数据
【发布时间】：2019-06-04 11:35:47
【问题描述】：

我正在使用带有服务器端渲染和 TransferState 的 Angular 将 http 数据从服务器传输到浏览器。这是我的代码：

getProducts() {
    let products = this.tstate.get(PRODUCT_KEY, null as any);
    if (products) {
        return of(products);
    }

    return this.http.post<any>(config.baseUrl+ 'product', {}).pipe(map(
        data => {
            this.tstate.set(PRODUCT_KEY, data as any);
            return data;
        }
    ))
}

在第一次加载时，我从 http 请求中获取数据。然后状态正在初始化。之后，当路由发生变化时，仍然传输状态保留数据，所以我无法发送获取数据的请求。知道如何在路由更改中重置传输状态吗？

【问题讨论】：

为什么不从缓存中检索数据后立即取消设置？
@David 这甚至不能解决问题。第一次，想象我从缓存中取消设置并发送一个新请求，然后我转到另一个菜单，然后回到上一个菜单，仍然会使用缓存。
抱歉，我不确定我是否理解。如果您只想使用一次传输状态，则在检索数据后取消设置密钥并且不缓存下一个请求。另一种选择是监听路由器事件并在需要时清除缓存
do not cache the next requests 是什么意思？（对不起，我解释的不好，让我再解释一下）
我的意思是如果你是客户端就不要使用this.tstate.set(PRODUCT_KEY, data as any);

标签： angular angular-universal angular-transfer-state

【解决方案1】：

您可以在导航后监听路由器事件并取消设置缓存数据

constructor(private router: Router,
//...)
{
  this.router.events.subscribe(evt => {
  if (evt instanceof NavigationEnd)
  {
    this.tstate.remove(PRODUCT_KEY);
  }

}

或者如果你是客户端，你可以停止设置传输数据

constructor(@Inject(PLATFORM_ID) private platformId: Object
//...)
{
}

getProducts() {
    let products = this.tstate.get(PRODUCT_KEY, null as any);
    if (products) {
        this.tstate.remove(PRODUCT_KEY);
        return of(products);
    }

    return this.http.post<any>(config.baseUrl+ 'product', {}).pipe(map(
        data => {
            if(!isPlatformBrowser(this.platformId)
            {
                this.tstate.set(PRODUCT_KEY, data as any);
            }

            return data;
        }
    ))
}

【讨论】：

谢谢。我更喜欢第二种方式。