Question

Angular 没有解析我的路由参数，我不明白为什么...... GAH。

这是我的惰性模块的路由文件；

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AssignedOrdersResolver } from 'src/app/common/services/partner/resolvers/assigned-orders.resolver';
import { PartnerResolver } from 'src/app/common/services/partner/resolvers/partner.resolver';
import { AssignedOrdersComponent } from './assigned-orders/assigned-orders.component';
import { PartnerComponent } from './partner.component';
import { SettingsComponent } from './settings/settings.component';
import { ShowComponent } from './show/show.component';

const routes: Routes = [
  {
    path: ':partnerId',
    component: PartnerComponent,
    resolve: {
      partner: PartnerResolver
    },
    children: [
      {
        path: '',
        component: ShowComponent
      },
      {
        path: 'assigned-orders',
        component: AssignedOrdersComponent,
        resolve: {
          orders: AssignedOrdersResolver
        }
      },
      {
        path: 'settings',
        component: SettingsComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PartnerRoutingModule { }

这是我如何构建链接的示例

          <li class="nav-item">
            <a
              class="nav-link"
              [routerLink]="['/partners', partner.id, 'assigned-orders']"
              routerLinkActive
            >
              Assigned Orders
            </a>
          </li>

这是我的解析器：

import { Injectable } from '@angular/core';
import {
  Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { Observable, of } from 'rxjs';
import { PartnerService } from '../partner.service';

@Injectable({
  providedIn: 'root'
})
export class AssignedOrdersResolver implements Resolve<boolean> {

  constructor(private readonly parter: PartnerService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    const id = route.params.partnerId;
    return this.parter.getAssignedOrders(id);
  }
}

与服务器的通信失败，因为 partnerId 不存在于 ActivatedRoute 的参数中：

GET http://localhost:3000/v1/fulfillment-partners/undefined/assigned-orders 500 (Internal Server Error)

这是出现在解析器中的 ActivatedRoute：

component: class AssignedOrdersComponent
data: {}
fragment: undefined
outlet: "primary"
// PARAMS ARE EMPTY
params: {} // <<<---- PARAMS EMPTY ???
queryParams: {}
routeConfig: {path: "assigned-orders", resolve: {…}, component: ƒ}
url: [UrlSegment]
_lastPathIndex: 2
_resolve: {orders: ƒ}
// ID PRESENT IN URL STRING
_routerState: RouterStateSnapshot {_root: TreeNode, url: "/partners/1/assigned-orders"} // <<<---- ID SHOWING HERE ???
_urlSegment: UrlSegmentGroup {segments: Array(3), children: {…}, parent: UrlSegmentGroup}
children: (...)
firstChild: (...)
paramMap: (...)
parent: (...)
pathFromRoot: (...)
queryParamMap: (...)
root: (...)
__proto__: Object

请解释一下。

Answer 1

您需要访问父路由参数，因此您必须在解析器中执行 route.parent.paramMap.get('partnerId') 才能获取它。

Angular Route Param 无法解析

1 个答案: