Различные маршруты, один и тот же компонент - почему компонент не перезагружается при изменении маршрута? - PullRequest
Новая
       33

Различные маршруты, один и тот же компонент - почему компонент не перезагружается при изменении маршрута?

0 голосов
/ 04 мая 2020

У меня есть 2 компонента, родитель и ребенок. Один и тот же родительский компонент должен загружаться на 2 разных маршрутах, скажем, route1 и route2. Родительский компонент проверяет, какой маршрут был использован, и устанавливает логическое значение (isRoute1). Дочерний компонент получает это логическое значение в качестве Входных данных и отображает HTML относительно. См. Код скелета ниже.

Допустим, сначала я открываю route1 в браузере. Я мог видеть тексты 'Parent init' и 'Child init' в консоли, а дочерний компонент отображал 'ROUTE1'. Все работает как положено. Затем я перехожу к route2 в браузере (прямо из route1) и получаю неожиданные результаты. В консоли ничего не отображается (поэтому OnInits не сработал), однако дочерний элемент отобразил 'ROUTE2'. Почему Angular не вызвал функцию OnInit ()? Как я мог этого добиться? Я думал, что при изменении маршрута родительский компонент будет перезагружен, так что ребенок. 

// Parent component's TS
isRoute1: boolean;
ngOnInit(): void {
console.log('Parent init')
this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route => {
  this.isRoute1 = route.params.id === 'route1';
});}

// Parent component's HTML
<child-component [isRoute1]="isRoute1"></child-component>


// Child component's TS
@Input()
isRoute1: boolean;

ngOnInit(): void {
  console.log('Child init')
}

// Child component's HTML
<div *ngIf="isRoute1; else route2"> ROUTE1 </div>
<div #route2> ROUTE2 </div>

1 Ответ

1 голос
/ 04 мая 2020

В вашем ngOnInit() вы можете подписаться на paramMap Observable для обнаружения изменений параметров на том же маршруте: 

export class HelloComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
      // Do more processing here if needed
    });
  }
}

Проверьте эту демонстрацию: https://stackblitz.com/edit/angular-vgz4yc

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

Чтобы ответить на ваш вопрос: компонент не будет перезагружен, если маршрут не изменяется (изменение параметра недостаточно). Но это не имеет значения, потому что вы можете подписаться на paramMap и, когда оно выдает новое значение, делать все, что вам захочется.

...