Angular 在路由更改时重置 TransferState 数据

Question

我正在使用 Angular 与服务器端呈现和 TransferState 将 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 请求中获取数据。然后状态正在初始化。之后，当路由发生变化时，仍然传输状态保留数据，所以我无法发送请求获取数据。知道如何在路线更改中重置传输状态吗？

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

Angular 在路由更改时重置 TransferState 数据

Angular reset TransferState data on route change

angular-universal

angular

angular-transfer-state