如何在 Angular5 中传递带有保留 URL 的可选路由器参数

Question

我有一些特定的要求，必须使用现有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>

当前 ：上面的代码正在工作，如果我单击路由器链接定义的锚点。 它的重定向和组件正在加载，但在刷新页面组件时没有加载并重定向到根 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

Answer 2

如果在硬刷新时 url 重写没有问题，则此解决方案将按预期工作。 这里的例子

在引导应用程序之前，我在 main.ts 中使用它。

const __stripTrailingSlash = (Location as any).stripTrailingSlash;
(Location as any).stripTrailingSlash = function _stripTrailingSlash(url: string): string {
if(url.indexOf('//') > -1){
url = url.replace('//','/');
return url;
}
return /[^/]/$/.test(url) ? url : __stripTrailingSlash(url);
}

来自 GitHub 问题的想法 https://github.com/angular/angular/issues/16051

Answer 3

您可以为一个组件/模块指定多个路由。一条路由将使用此参数，而第二条路由将使用此参数 - 没有。

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

或者你可以通过查询字符串传递它们，就像这里一样 如何在 Angular 2 中从 url 获取查询参数？ 在这种情况下，您无需在路由配置中指定它们

Answer 4

无需创建多个路由。

取而代之的是这个<a [routerLink]="['/search/','','37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>

您可以创建这样的方法

goToPage() { this.router.navigate(['/product-list'], { queryParams: {searchParms?.schkey},{ searchParms?.lat}, {searchParms?.lng} , { searchParms?.name}, { searchParms?.filter} }); }

您可以在 ts 文件中创建一个对象，使用字段调用搜索 Parms 并使用它。

并创建类似路线 康斯特路线Routes = [ { path: '', component: SearchpagesComponent , children: [ { path: 'search', loadChildren: './search/search.module#SearchModule', // here schkey is optinal just required blank slashes } ] } ];

Answer 5

您可以指定一个未在组件中定义的变量名称，而不是在组件<a [routerLink]="['/search/',nondefinedvariable,'37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>中为 ：schkey 指定 '' ，这样当 url 形成时，它看起来像http：//..../search/undefined/37....即使您刷新它，也会将您转发到同一页面，但是您需要在 SearchComponent 中检查 schkey 值，如果您用于任何功能，它不应等于'undefined'，这是一个黑客，但可以满足这种情况