Angular 路由给出了不正确的组件

Question

我遇到了 angular 路由问题。当我尝试转到 my.domain/new-york 时，我找到了正确的页面 (HomeComponent) 但是当我尝试去 my.domain/new-york/search 时，我得到 HomeComponent 而不是 SearchComponent。我做错了什么？

const routes: Routes = [
  {
    path: '',
    component: BasicComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        data: {
          headerDark: true
        }
      },
      {
        path: ':city',
        component: HomeComponent,
        data: {
          headerDark: true
        },
        children: [
          {
            path: ':category',
            component: HomeComponent
          },
          {
            path: 'search',
            component: SearchComponent,
            data: {
              headerDark: true
            }
          },
        ]
      },
    ]
  }
];

更新：我使用两个模块：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/basic/basic.module').then(mod => mod.BasicModule),
    runGuardsAndResolvers: 'always'
  },
  {
    path: 'dashboard',
    canActivate: [AuthService],
    loadChildren: () => import('./modules/dashboard/dashboard.module').then(mod => mod.DashboardModule)
  },
  {
    path: '**',
    redirectTo: '/'
  }
];

更新 2：示例 https://stackblitz.com/edit/angular-ghafx6?file=src%2Fapp%2Forders%2Forders-routing.module.ts

Answer 1

这是因为在您的代码中，您在 search 之前先初始化了 /:category，因此 search 关键字被读取为类别参数。

尝试将路由重新排序为：

children: [
  {
     path: 'search',
     component: SearchComponent,
     data: {
       headerDark: true
     }
  },
  {
     path: ':category',
     component: HomeComponent
  },
]

更新：

您也可以使用此方法尝试多个参数实例。记下顺序。

方法一：

附上StackBlitz Demo供大家参考。您也可以检查它的控制台

children: [
  {
    path: ':city/search',
    component: SearchComponent
  },
  { 
    path: ':city/:category',
    component: HomeComponent,
  },
  { 
    path: ':city',
    component: HomeComponent
  }
]

方法二：

根据你上面的路线和测试你想在 :city 下的那些路线上做的事情是你想在 CityComponent 下或在你的情况下在 HomeComponent 下渲染那些组件，但没有 children 正在渲染？

这是因为您需要在 HomeComponent 中添加一个 <router-outlet> 来呈现您的 children 组件。

{
   path: ':city',                           // This is your parent route and parent component which you expect those child components below will be rendered in here. Thus, you need to specify a router-outlet in here.
   component: HomeComponent,
   ...
   children: [                              // This is your child components that will render/reflect it's templates to their parent above or in this case, inside the HomeComponent 
      {
        path: ':category',
        component: HomeComponent            // This will render the category -> home template/component inside the parent's HomeComponent
      },
      {
        path: 'search',
        component: SearchComponent,         // this will render the search template/component inside the parent's HomeComponent
      }
    ]
},

如果您想在不同的路线中使用它，上面的方法 #1 解决方案可以帮助您。

Answer 2

如果您使用动态路由，路由顺序非常重要。

这里的问题是 search 在城市名称被认为是 category 之后，因为 category 是 dynamic route 并且它出现在 static route 之前。所以总是建议dynamic route一定要放在最后。

对于你的问题，改变你的路线将解决你的问题。

 const routes: Routes = [
  {
    path: '',
    component: BasicComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        data: {
          headerDark: true
        }
      },
      {
        path: ':city',
        component: HomeComponent,
        data: {
          headerDark: true
        },
        children: [
          {
            path: 'search',
            component: SearchComponent,
            data: {
              headerDark: true
            }
          },
          {
            path: ':category',
            component: HomeComponent
          },
        ]
      },
    ]
  }
];

参考Stackblitz

已编辑

根据您的 stackblitz，需要进行以下 2 处更改。

city.component.html

已添加<router-outlet></router-outlet>
orders.component.html

    <a [routerLink]="['/new-york']">
      City
    </a>
    <a [routerLink]="['/new-york/shops']">
      Category
    </a>
    <a [routerLink]="['/new-york/search']">
      Search
    </a>
    <router-outlet></router-outlet>

参考Stackblitz

Angular 路由给出了不正确的组件

Angular routing gives incorrect component

angular-routing

angular