Перезагрузите компонент с другими параметрами маршрута в angular4

Вам необходимо выполнить логику инициализации в функции обратного вызова подписки в функции обратного вызова подписки наблюдаемого потока route.params.

В вашем классе компонентов

@Component({
  ...
})
export class MyComponent implements OnInit {

   myLocation:string;

   constructor(private route:ActivatedRoute) {}

   ngOnInit() {
     this.route.params.subscribe((params:Params) => {
        this.myLocation = params['location'];
        // -- Initialization code -- 
        this.doMyCustomInitialization();
     }
   }

   private doMyCustomInitialization() {
       console.log(`Reinitializing with new location value ${this.location}`);
   }
}

С другой стороны, если вам нужно разрешить данные на основе значения «местоположения», вы должны использовать защиту разрешения, которая разрешает данные до создания компонента. Подробнее см. https://angular.io/guide/router#resolve-guard. информация о разрешающих охранниках и маршрутизации.

Вот рабочий планкр. https://plnkr.co/edit/g2tCnJ?p=preview

ОТРЕДАКТИРОВАНО

Угловой способ сообщить маршрутизатору сделать это — использовать onSameUrlNavigation с angular 5.1.

Но мне пришлось решить эту проблему по-другому (Stackblitz), от subscribing до route events и фактически вызывая custom reInit method.

Хитрость заключается в том, чтобы добавить все подписки на один и тот же объект, а затем отменить подписку ТОЛЬКО тогда, когда ngOnDestroy вызывается angular, а остальные переменные вашего шаблона изменяются с custom destroy method...

    public subscribers: any = {};

    constructor(private router: Router) {
    /** 
      * This is important: Since this screen can be accessed from two menu options 
      * we need to tell angular to reload the component when this happens.
      * It is important to filter the router events since router will emit many events,
      * therefore calling reInitComponent many times wich we do not want.
      */   
      this.subscribers._router_subscription = this.router.events.filter(evt => evt instanceof NavigationEnd).subscribe((value) => { 
        this.reInitComponent();
      });
    }

    reInitComponent() {
        this.customOnDestroy();
        this.customOnInit();
    }

    customOnInit() {
        // add your subscriptions to subscribers.WHATEVERSUB here
        // put your ngOnInit code here, and remove implementation and import 
    }

    customOnDestroy() {
      // here goes all logic to re initialize || modify the component vars  
    }

    /**
     * onDestroy will be called when router changes component, but not when changin parameters ;)
     * it is importatn to unsubscribe here
     */
     ngOnDestroy() {  
       for (let subscriberKey in this.subscribers) {
          let subscriber = this.subscribers[subscriberKey];
          if (subscriber instanceof Subscription) {
            subscriber.unsubscribe();
          }
        }
     }

Обратите внимание, что если вы реализуете обработчик жизненного цикла ngOnInit, вы должны удалить его и реализовать собственный метод, как в примере.

Я добавил метод unsubscription из-за этой ошибки angular. Angular должен фактически автоматически отписываться от router.events при уничтожении компонента, но, поскольку это не так, если вы не отмените подписку вручную, вы в конечном итоге будете вызывать http-запросы (например) столько раз, сколько вы ввели компонент.

https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

В вашем компоненте вам нужно подписаться на параметры, чтобы определить, были ли они изменены.