angular 中的路由路径顺序是否重要？

Question

我正在尝试为我的组件之一制作路由器，但它没有按预期工作。

最初它工作正常，但我不得不添加另一条路线来决定在重定向时打开哪个 mat-tab。我像那样添加了第二条路线，但由于某种原因，即使前两条路线工作正常，第三条路线也停止工作。

import { Routes } from '@angular/router';
import { ActionComponent } from './action.component';
import { ActionResolver } from './action.resolver';
import { ACTION_RESULT_ROUTES } from './result/action-result.routes';

export const ACTION_ROUTES: Routes = [
  { path: ':id', component: ActionComponent, resolve: { action: ActionResolver } },
  { path: ':id/:tab', component: ActionComponent, resolve: { action: ActionResolver } },
  {
    path: 'action-result',
    children: ACTION_RESULT_ROUTES,
  },
];

我在尝试第三条路线时遇到了一个很大的错误，但它是这样开始的：

ERROR Error: Uncaught (in promise): TypeError: You provided 'null' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.

以防万一，我尝试重新排序，当我这样做时，所有三个都工作正常：

export const ACTION_ROUTES: Routes = [
  { path: ':id', component: ActionComponent, resolve: { action: ActionResolver } },
  {
    path: 'action-result',
    children: ACTION_RESULT_ROUTES,
  },
  { path: ':id/:tab', component: ActionComponent, resolve: { action: ActionResolver } },
];

谁能告诉我为什么会这样？

编辑： 添加了 ACTION_RESULT_ROUTES 进行说明

export const ACTION_RESULT_ROUTES: Routes = [
  { path: ':id', component: ActionResultComponent, resolve: { result: ActionResultResolver } },
];

Answer 1

根据Angular：

"The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes."

建议首先使用静态路由，因此您的 action-result 路径应该放在第一位，然后是 :id/:tab 路径，最后是 :id 路径。如果您有通配符路由，它应该始终是数组中的最后一条路由。

此逻辑背后的原因是，如果 :id 路径在 action-result 路径之上，angular 将使用单词 'action-result' 作为:id 路径。同样，如果 :id 路径位于 :id/:tab 路径之上，angular 将使用单词 id/tab 作为 :id 路径中的 ID。

因此，一个经验法则是始终将静态路由放在首位，然后是从最具体到最不具体的动态路由，最后是通配符路由。 E.G.

路径 1
路径 2
PATH3/:USER/:ROLE/:PAGE
PATH4/:站点/:ID
PATH5:/ID
通配符路由 (*)

angular 中的路由路径顺序是否重要？

Does the routing paths order matter in angular?

html

routes

typescript

angular