代码之家  ›  专栏  ›  技术社区  ›  Sam

在父组件中获取子路由数据

  •  0
  • Sam  · 技术社区  · 6 年前

    在我的角度模块路由中,有一个父组件包含子组件作为tabitems。

    路由:

    {
        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>
    

    在父组件中 教师表控件组件 我需要从路由访问数据{title:…}。我在.ts代码中尝试了以下操作:

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

    这工作得很好,但只在第一次进入父组件时有效。当我从一个孩子切换到另一个孩子时,不会触发任何事件。

    从一个孩子导航到另一个孩子时,如何获得通知?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Amit Chigadani    6 年前

    你可以订阅 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);
        }
    );