Получить данные дочерних маршрутов в родительском компоненте - PullRequest
Новая
       14

Получить данные дочерних маршрутов в родительском компоненте

0 голосов
/ 04 июня 2018

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

Маршрутизация: 

{
    path: "teacher/:id", component: TeacherTabcontrolComponent,
    children: [
        { path: 'dialogue', component: TeacherTabpageDialoguesComponent, data: { title: 'Dialoge' } },
        { path: 'settlements', component: TeacherTabpageSettlementsComponent, data: { title: 'Settlements' } },
        { path: 'timesheets', component: TeacherTabpageTimesheetsComponent, data: { title: 'Timesheets' } },
        { path: 'transactions', component: TeacherTabpageTransactionsComponent, data: { title: 'Transactions' } },
    ]
},

Элемент управления с вкладками в TeacherTabcontrolComponent: 

<ul class="nav nav-tabs">
  <li routerLinkActive="active"><a [routerLink]="['dialogue']">Dialogue</a></li>
  <li routerLinkActive="active"><a [routerLink]="['transactions']">Transactions</a></li>
  <li routerLinkActive="active"><a [routerLink]="['settlements']">Settlements</a></li>
  <li routerLinkActive="active"><a [routerLink]="['timesheets']">Timesheets</a></li>
</ul>
<div class="tab-content">
  <router-outlet></router-outlet>
</div>

В родительском компоненте TeacherTabcontrolComponent Мне нужен доступ к данным {title: ...} из маршрутизации.В своем .ts-коде я попробовал следующее: 

constructor(
    private _route: ActivatedRoute,
) {
    this._route.url.subscribe((e) => {
        console.log(e, this._route.snapshot.firstChild.data);
    });
}

Это прекрасно работает, но только при первом входе в родительский компонент.Когда я переключаюсь с одного ребенка на другого, событие не запускается.

Как получить уведомление при переходе от одного ребенка к другому?

1 Ответ

0 голосов
/ 04 июня 2018

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

constructor(private _route: ActivatedRoute, private _router: Router)

this._router.events
.filter(event => event instanceof NavigationEnd)
 .subscribe(
    () => {
       console.log(this._route.snapshot.firstChild.data);
    }
);
...