Question

我对Angular路由很陌生，正在尝试从路由访问ID，但似乎没有可用的参数。这是我的路线的组织方式（这是在app.module.ts中导入的）：

import {FinancePageModule} from './client-detail/finance/finance.module';
import {AuthGuard} from '../../auth/auth.guard';
import {ClientDetailPageModule} from './client-detail/client-detail.module';
import {ClientIndexPageModule} from './client-index/client-index.module';

const clientsRoutes: Routes = [
  {
    path: 'clients',
    component: ClientIndexPage,
    canActivate: [AuthGuard],
  },
  { path: 'clients/:id',
    component: ClientDetailPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'finance',
        component: FinancePage
      },
      {
        path: '',
        redirectTo: 'finance',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(clientsRoutes),
    FinancePageModule,
    ClientIndexPageModule,
    ClientDetailPageModule,
  ],
  exports: [RouterModule]
})
export class ClientsRoutingModule { }

我的FinancePageModule没有路由（这可能是为什么我无法访问ID的原因），并且在加载FinancePage时，ID为空。

export class FinancePage implements OnInit {

  client_id: number;

  constructor( private route: ActivatedRoute ) {
  }

  ngOnInit() {
    this.client_id = parseInt(this.route.snapshot.paramMap.get('id'));
    console.log(this.client_id) // logs NaN
  }
}

如何修改路由，以便该变量在FinancePage组件中可用？

Answer 1

在您的情况下，id是在父路径中设置的，因此您可以使用this.route.parent，

原因是ActivatedRoute仅通过当前组件路径的参数，因为财务没有任何路线参数，也没有传递任何参数因此您必须使用route.parent来获取父路由的参数。

 ngOnInit() {
    this.client_id = parseInt(this.route.parent.snapshot.paramMap.get('id'));

   this.route.parent.params.forEach(
      param => console.log(param)
    )

    this.route.parent.paramMap.subscribe(params => {
      console.log(params)
    })
  }

在子模块中访问路由ID

1 个答案: