Angular RouterModule.forRoot - 访问路由路径参数，向下传递给路由数据

Question

我需要在我的 angular 模块中设置一条路线的数据：

@NgModule({
    imports: [
        RouterModule.forRoot(
            [
                {
                    component: ManageProjectReleaseStageComponent,
                    path: 'ng-projects/:id/releases/:releaseId',
                    data: {
                        breadcrumb: 'View Release',
                        breadcrumbPredecessors: [
                            { label: 'Project Search', url: '/ng-projects/search' },
                            { label: 'View Project', url: '/ng-projects/:id/view' }
                        ]
                    }
                },

我需要从此处的位中获取 id 参数：path: 'ng-projects/:id/releases/:releaseId',，并将其传递到此处的位中：{ label: 'View Project', url: '/ng-projects/:id/view' }

因为现在它只是传递字符串：":id".

如何从 path 访问 :id 参数，将其传递到 data？

Answer 1

您可以使用 Resolvers 而不是静态路由器 data

访问路由器实例并获取其参数

breadcrumb.resolver.ts

@Injectable({ providedIn: 'root' })
export class BreadcrumbResolver implements Resolve<any> {   
                                                                                                
  constructor() {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      // Get :id from the route
      const projectId = route.params.id; 

      // Initialize and Return this data
      const breadcrumb = {
          breadcrumb: 'View Release',
          breadcrumbPredecessors: [
             { label: 'Project Search', url: '/ng-projects/search' },
             { label: 'View Project', url: `/ng-projects/${projectId}/view` }     // Pass your ID value from the route
          ]
      }

      return breadcrumb;    
  }

}

路由器模块

RouterModule.forRoot([
     {
        component: ManageProjectReleaseStageComponent,
        path: 'ng-projects/:id/releases/:releaseId',
        resolve: {
           breadcrumb: BreadcrumbResolver
        }
        
     },
     ...
])

ManageProjectReleaseStageComponent

@Component({...})
export class ManageProjectReleaseStageComponent implements OnInit {

    constructor(private route: ActivatedRoute) {}

    ngOnInit(): void {
       const breadcrumb = this.route.snapshot.data.breadcrumb;    // Access your breadcrumb value
       console.log(breadcrumb);          
    }

}

已创建Stackblitz Demo供您参考

Angular RouterModule.forRoot - 访问路由路径参数，向下传递给路由数据

Angular RouterModule.forRoot - access route path parameter, and pass it down to route data

angular-routing

angular