Question

我在Angular路由方面遇到问题我有两个模块“基本”和“仪表板”

在基本模块中，我可以为非默认城市传递城市参数（对于默认城市，它应该不带参数，例如，如果纽约为默认城市，则路径为http://my.domain/new-york，APP应该使用HomeComponent ），但并非默认应用程序应使用路径http://my.domain/los-angeles并使用相同的组件。我从后端获得的城市列表。我的结构的下一个层次是类别。我也从后端获得了类别，但是如果我尝试转到http://my.domain/category，则得到的是 HomeComponent 而不是 SearchComponent 。正确的处理方式是什么？

我需要：

http://my.domain/category -> SearchComponent
http://my.domain/city/category -> SearchComponent
http://my.domain/city -> HomeComponent
http://my.domain/ -> HomeComponent

应用程序路由配置：

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

基本模块路由

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

Answer 1

我认为您可以通过实现自定义(?<=footer-tabs-gold)[^&]+(?=footer-tabs)来解决此问题。

这是UrlMatcher的{{3}}：

UrlMatcher

Angular对每个路由配置对象使用type definition。它的作用是确定位置参数（例如export type UrlMatchResult = { consumed: UrlSegment[]; posParams?: {[name: string]: UrlSegment}; }; export type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => UrlMatchResult|null;）和消耗的段（与发布的URL匹配的段）：

:city

考虑到这一点，我们可以创建一个自定义/* ... */ for (let index = 0; index < parts.length; index++) { const part = parts[index]; const segment = segments[index]; const isParameter = part.startsWith(':'); if (isParameter) { posParams[part.substring(1)] = segment; } else if (part !== segment.path) { // The actual URL part does not match the config, no match return null; } } return {consumed: segments.slice(0, parts.length), posParams};，如下所示：

UrlMatcher

并且可以这样使用：

const cityMatcher: UrlMatcher = (segments, group, route) => {
  // you'll have to find the issued city name from `segments`
  // simply use console.log(segments) to find the proper way to do it
  // after you've found the name of the city, check if it is in the list of cities

  // if NOT in the list
  return null

  // if it is there
  return {
    consumed: segments.slice(0, 1),
    posParams: { city: nameOfTheFoundCity }
  }
}

{ { path: ':city', component: HomeComponent, data: { headerDark: true }, matcher: cityMatcher }, }可以使用相同的方法。

Answer 2

我没有适合您的答案，但这可能与路径匹配策略有关。

查看here，看看是否将pathMatch：'Full'添加到您的一条路线可以解决您的问题！我不知道您应该将pathMatch完整策略添加到哪个确切路线，但我相信您的问题的答案就在这里。

欢呼

对同一路径使用不同组件的角形布线正确方法

2 个答案: