Повторная загрузка при маршрутизации на один и тот же компонент - PullRequest
Новая
       4

Повторная загрузка при маршрутизации на один и тот же компонент

0 голосов
/ 02 апреля 2020

Я пытаюсь добиться повторного отображения индикатора загрузки при маршрутизации на тот же компонент.

html: 

<div *ngIf="car$ | async as car; else loadingCar">
    Selected {{car}}
</div>

<ng-template #loadingCar>loading...</ng-template>

<div>
    <a routerLink="/cars/bmw">
        <button class="button">BMW</button>
    </a>

    <a routerLink="/cars/mercedes">
        <button class="button">Mercedes</button>
    </a>

    <a routerLink="/cars/audi">
        <button class="button">Audi</button>
    </a>

    <a routerLink="/cars/dacia">
        <button class="button">Dacia</button>
    </a>
</div>

ts 

export class CarsComponent implements OnInit {
  car$: Observable<string>;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.car$ = this.route.paramMap.pipe(
      map(params => params.get("carBrand")),
      delay(2000)
    );
  }
}

Это работает в первый раз на компоненте, но как только вы нажимаете на другой автомобиль, он показывает предыдущий, пока задержка не будет закончена

Я сделал Stackblitz для простого тестирования: https://stackblitz.com/edit/angular-access-url-params-subscription-nxe3cw

1 Ответ

1 голос
/ 02 апреля 2020

Единственный способ увидеть загрузку снова - это, если предложение else вызвано из *ngIf. Для этого cars$ необходимо получить значение undefined.

Каждый раз, когда routeParams$ запускает новое значение, вам необходимо установить это значение undefined. Вы можете сделать это с помощью следующего кода. 

const reset$ = new Subject<string>();

const data$ = this.route.paramMap.pipe(
      tap(_ => reset$.next(undefined)),
      map(params => params.get("carBrand")),
      delay(2000)
);

this.car$ = merge(reset$, data$);

Обновленный блиц: https://stackblitz.com/edit/angular-access-url-params-subscription-7hkady?file=src / app / cars / cars.component.ts

...