Угловой сброс данных 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;
        }
    ))
}