Próbuję osiągnąć ponownie wskaźnik ładowania podczas trasowania do tego samego składnika.

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

Działa to po raz pierwszy na komponencie, ale po kliknięciu innym samochodzie pokazuje poprzedni, aż opóźnienie zostanie zakończone

Zrobiłem stackilblitz dla łatwych testów: HTTPS: // Stackblitz. COM / Edytuj / Kątowy-URL-URL-params-subskrypcja-nxe3cw

0
Kiwi 2 kwiecień 2020, 16:25

1 odpowiedź

Najlepsza odpowiedź

Jedynym sposobem pojawili się ponownie, jeśli klauzula else jest wyzwalana z *ngIf. Aby to zrobić, cars$ musi uzyskać wartość undefined.

Za każdym razem, gdy routeParams$} wystrzeliwuje nową wartość, musisz ustawić wartość undefined. Możesz to zrobić za pomocą następującego kodu.

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

Updated Blitz: https://stackblitz.com/edit/angular-access-url-params-subscription-7HKady?file=src/app/cars/cars.component.ts.

1
KwintenP 2 kwiecień 2020, 13:31