угловая 7 маршрутизация на один и тот же компонент, но другой параметр не работает

Question

У меня есть 2 выхода маршрутизатора: боковая панель и одна по умолчанию.

 {path: 'motor/:id', component: MotorComponent}

Из боковой розетки у меня есть несколько маршрутизаторных ссылок на розетку маршрутизатора по умолчанию, которые нацелены на тот же компонент (MotorComponent), но другой параметр.

this.router.navigate(['./', {outlets: {primary: ['motor', 
id]}}]);

Если я нажму на одну,соответствующий компонент загружен, но если я нажму на другую ссылку маршрутизатора, правильный компонент не будет загружен.Параметр изменяется в URL.

Я читал, что это общая проблема.Я попытался использовать стратегию повторного использования, но я не думаю, что она была реализована должным образом, ничего не произошло.

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

Это мой ngOninit, где я подписываюсь на параметры маршрута, сохраняю этот идентификатор и затем извлекаю свой новый объект из сервиса.

motor: MotoarePrincipale;
id: number;

ngOnInit() {
this.route.params.subscribe(
  (params: Params) => {
    this.id = +params['id'];
  }
);
this.masinaService.getMotorByMotorId(this.id).subscribe(data => {
  this.motor = data;
});

Answer 1

для angular 7 (я пробовал только в этой версии) вы можете использовать в своем компоненте стратегию повторного использования маршрута:

constructor(private routerR: Router) {

    // this is for routerLink on same component when only queryParameter changes
    this.routerR.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
  }

Answer 2

Вам нужно использовать

private route: ActivatedRoute,
private router: Router

Вам необходимо прослушать изменения идентификатора в вашем URL и, наконец, переключить карту на правильный идентификатор.Посмотрите на этот пример из RXJS Observables в Angular - Уорд Белл и Сандер Эллис

Вот пример реализации, где вы можете смотреть фильмы по их идентификатору без обновления страницы:

TS:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { Observable, Subscription } from 'rxjs';
import { switchMap, tap, map } from 'rxjs/operators';

import { Movie } from '../../samples/sw-interfaces';
import { FilmService } from './film.service';

@Component({
  selector: 'app-movie',
  template: `
      <h1>Routed Movie Component</h1>

      <div>
        <button (click)="previousMovie()">Previous</button>

        <div *ngIf="currentMovie$ | async as movie; else noMovie"  class="title">
            ({{movie.id}}) {{ movie.title }}
        </div>

        <ng-template #noMovie>
            <div class="missing">No Movie</div>
        </ng-template>

        <button (click)="nextMovie()">Next</button>
      </div>
    `,
  providers: [FilmService],
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit, OnDestroy {
  currentMovie$: Observable<Movie>;

  currentId: number;
  nextId: number;
  previousId: number;

  routerEventsSubscription: Subscription;

  constructor(
    private filmService: FilmService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    this.listenToRouteParams();
    this.listenToRouterEvents();
  }

  private listenToRouteParams() {
    // ActivatedRoute.paramMap observable changes whenever the URL's id changes
    this.currentMovie$ = this.route.paramMap.pipe(

      // extract film id parameter
      map(params => params.get('id')),

      // switchMap because can discard in-flight request for a new id
      switchMap(id => {
        return this.filmService.getFilm(id).pipe(
          tap(movie => this.currentId = movie ? movie.id : 0)
        );
      })
    );
  }

  nextMovie() {
    this.navigate(this.currentId + 1);
  }

  previousMovie() {
    this.navigate(this.currentId - 1);
  }

  navigate(id: number) {
    id = id || 1;
    this.router.navigate([`/movie/${id}`]);
  }




  /// ROUTER EVENTS ////
  private listenToRouterEvents() {
    // Listen to the router do its thing
    // What is `routerEventsSubscription`?
    this.routerEventsSubscription = this.router.events.subscribe(event => {
      console.log('Router event: ', event);
    });
    console.log('MovieComponent initialized');
  }

  ngOnDestroy(): void {
    console.log('MovieComponent destroyed');

    // Question: Why must we unsubscribe from the router?
    // Question: Why do we NOT unsubscribe from `route.paramMap`
    this.routerEventsSubscription.unsubscribe();
  }

}

СЕРВИС:

// tslint:disable:member-ordering
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import { Movie, RootObject } from './../sw-interfaces';
import { SwUrlService } from '../../samples/sw-url.service';

@Injectable()
export class FilmService {
    constructor(private http: HttpClient, private swUrlService: SwUrlService) {}

    getFilm(id: string) {
      return this.http.get<RootObject<Movie>>(`${this.url}/${id}`)
        .pipe(
          map(data => data.results),
          catchError(err => {
            if (err.status === 404) {
              return of(undefined); // OK if not found.
            }

            // log HTTP error and ...
            console.error('GET failed', err)
            // rethrow as a user-friendly message
            throw new Error('Sorry but can\'t get movies right now; please try ain  later');
          })
        );
    }

    private get url() {
        return this.swUrlService.url;
    }
}