angular - 如何在 Angular 5 中传递带有保留 URL 的可选路由参数

Question

我有一些特定要求，必须使用现有 URL。现有 URL 已被很好地编入索引并用于促销和许多事件，因此没有机会修改它。

现有的 URL 就像 - www.xyz.com/search//65.5445/-122.56454/Listing-name/All

虽然在 Angular 中定义 URL，如

const routes: Routes = [
  { path: '', component: SearchpagesComponent ,
    children: [
      {
        path: 'search/:schkey/:lat/:lng/:name/:filter', loadChildren: './search/search.module#SearchModule',
        // here schkey is optinal just required blank slashes 
      }
    ]
  }
];

并在路由器链接中

<a [routerLink]="['/search/','','37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>

当前:如果我点击 Routerlink 定义的 anchor ，上面的代码是有效的。它的重定向和正在加载的组件，但刷新页面组件时未加载并重定向到根 URL。

应加载直接链接或刷新页面组件上的www.xyz.com/search//37.7749295/-122.41941550000001/San-Francisco/。并且双斜杠 search// 应该被保留。

用于复制 - https://stackblitz.com/edit/angular-routing-child-routes-6ydor6

Github 问题 - https://github.com/angular/angular/issues/32853

Answer 1

原因是因为:schkey留空

您可以使用或不使用某些参数定义多个路由。

{
    path: 'search/:schkey/:lat/:lng/:name/:filter',
    component: SearchpageComponent
},
{
    path: 'search/:lat/:lng/:name/:filter',
    component: SearchpageComponent
}

基本上，而不是:

http://.../search//37.7749295/-122.41941550000001/San-Francisco/All

您的网址将是:

http://.../search/37.7749295/-122.41941550000001/San-Francisco/All