Angular: Как я могу получить родительский компонент с дочерними маршрутами, чтобы реагировать на изменения URL (которые включают изменения параметров дочернего маршрута)? - PullRequest
0 голосов
/ 07 марта 2020

Это моя текущая настройка маршрута. (Примечание: ScheduleComponent загружается основным приложением, когда мы хотим видеть экран Расписание). ScheduleComponent имеет <route-outlet> для дочерних маршрутов.

const routes: Routes = [
  {
    path: '',
    component: ScheduleComponent,
    data: {
      screenName: 'schedule',
    },
    children: [
      { path: '', redirectTo: 'ABC', pathMatch: 'full' },
      {
        path: ':service',
        component: ScheduleTilesContainerComponent,
        data: {
          screenName: 'schedule',
        },
      },
      {
        path: ':service/:year/:month/:day',
        component: ScheduleTilesContainerComponent,
        data: {
          screenName: 'schedule',
        },
      },
    ],
  },
];

В ScheduleComponent у меня есть:

// this._route: ActivatedRoute (in constructor)
this._route.params.subscribe((params: Params) => {
 console.log('Schedule params: ', params);
}

В ScheduleTilesContainerComponent у меня есть:

// this._route: ActivatedRoute (in constructor)
this._route.params.subscribe((params: Params) => {
 console.log('Tiles Container params: ', params);
}

СЦЕНАРИЙ A:

Когда мы помещаем это в браузер: http://myserver.com/schedule Мы видим это в консоль:

Schedule params: {}
Schedule params: {service: "ABC"}
TileContainer params: {service: "ABC"}

Затем взаимодействие с пользователем вызывает это: this._router.navigate(['schedule/ABC/2020/03/25']);

Затем мы видим в адресной строке браузера: http://myserver.com/schedule/ABC/2020/03/25 Мы видим это в консоли:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Затем взаимодействие с пользователем вызывает это: this._router.navigate(['schedule/ABC/2020/03/11']); Затем мы видим в адресной строке браузера: http://myserver.com/schedule/ABC/2020/03/11 Мы видим это в консоли:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "11"}

Вопрос 1: Как получилось, что ScheduleComponent не видит триггера потока наблюдаемых параметров, когда мы перемещаемся ()?

Продолжение ... Затем я нажимаю кнопку НАЗАД: Мы видим в адресной строке браузера: http://myserver.com/schedule/ABC/2020/03/25 ( исправить предыдущий URL) Мы видим это в консоли:

TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Ques 2: Почему ScheduleComponent также не видит триггера наблюдаемого потока параметров здесь? (это, вероятно, та же проблема)


СЦЕНАРИЙ B

ОДНАКО, если ЭТОТ способ, которым мы входим на экран, тогда ScheduleComponent получает поток параметров!

Поместите это непосредственно в браузер: http://myserver.com/schedule/ABC/2020/03/25

Schedule params: {}
Schedule params: {service: "ABC", year: "2020, month: "03", day: "25"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Тогда взаимодействие с пользователем вызывает это: this._router.navigate(['schedule/ABC/2020/03/11']);

Schedule params: {service: "ABC", year: "2020, month: "03", day: "11"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "11"}

Если мы нажмите кнопку НАЗАД, которую показывает предыдущий URL-адрес ... Мы это в консоли:

Schedule params: {service: "ABC", year: "2020, month: "03", day: "25"}
TileContainer params: {service: "ABC", year: "2020, month: "03", day: "25"}

Вопрос 3: Почему поток параметров ScheduleComponent видит это изменение?

Вопрос 4: Как я могу получить мой ScheduleComponent, чтобы ВСЕГДА видеть обновление URL?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...