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

您可以使用解析器而不是路由器 static data來訪問路由器實例並獲取其參數

面包屑解析器.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
        }
        
     },
     ...
])

管理項目發布階段組件

@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供您參考