Question

我有一些特定要求，即必须使用现有URL。现有URL已被很好地索引，可用于促销活动和许多广告系列，因此没有机会对其进行修改。

现有的网址就像-ChangeDetectionStrategy.OnPush

在Angular中定义

之类的URL

www.xyz.com/search//65.5445/-122.56454/Listing-name/All

并在路由器链接中

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 
      }
    ]
  }
];

当前：上面的代码正在工作，如果我单击Routerlink定义的锚点。其重定向和组件正在加载，但刷新页面组件时未加载并重定向到根URL。

预期：直接链接或刷新页面组件上的<a [routerLink]="['/search/','','37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>应该被加载。并且应保留双斜杠www.xyz.com/search//37.7749295/-122.41941550000001/San-Francisco/。

用于复制-https://stackblitz.com/edit/angular-hjlded

Github问题-https://stackblitz.com/edit/angular-routing-child-routes-6ydor6

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

您的URL为：

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

Answer 2

如果硬刷新时URL重写没有问题，则此解决方案可以按预期工作。 example here

在引导应用程序之前，我在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',
      }
    ]
  }
];

或者您可以通过查询字符串传递它们，例如此处How to get query params from url in Angular 2?，在这种情况下，您无需在路由配置中指定它们

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文件中创建一个对象并使用字段调用searchParms并使用它。

并创建路线，例如 const路由 Routes = [ { path: '', component: SearchpagesComponent , children: [ { path: 'search', loadChildren: './search/search.module#SearchModule', // here schkey is optinal just required blank slashes } ] } ];

Answer 5

您可以指定未在组件中定义的变量名称，而不用为<ul class="nav navbar-nav" id="mainNav"> <li class="active"><a data-scroll href="#wmc" class='hidden-xs hidden-sm' >Home</a></li> <li><a data-scroll href="#agenda" class='hidden-xs hidden-sm'>Agenda</a></li> <li><a data-scroll href="#wmcpartners" class='hidden-xs hidden-sm'>Partners</a></li> <li><a data-scroll href="https://www.aafmindia.co.in/EventRegistration.aspx" class='hidden-xs hidden-sm'>Register</a></li> <li><a data-scroll href="#contact" class='hidden-xs hidden-sm'>Contact Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle bottompad0 dropbtn hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Past Events <span class="caret"></span> </a> <ul class="dropdown-content"> <li><a href="gallery2018.html">2018</a></li> <li><a href="gallery2017.html">2017</a></li> <li><a href="gallery2016.html">2016</a></li> <li><a href="gallery2015.html">2015</a></li> <li><a href="gallery2014.html">2014</a></li> <li><a href="gallery2013.html">2013</a></li> </ul> h</li></ul>中的：schkey指定''，这样在url形式时它将看起来像 http：//....。 / search / undefined / 37 .... 即使您刷新它也可以将您转发到同一页面，但是，如果您要使用任何功能，则需要在SearchComponent中检查schkey值，该schkey值不应等于<a [routerLink]="['/search/',nondefinedvariable,'37.7749295','-122.41941550000001','San-Francisco','All']" > Goto Search Page </a>，这是一个hack ，但可以满足要求

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

5 个答案: