同一页面中的 Angular 6 路由器链接问题

Question

我有两个链接：

1. ['/productlist',1000]
2. ['/productlist',1001]

这两个链接在同一个页面上。如果我第一次点击任何链接。它正在重定向到页面，但是如果我单击另一个链接，它就不起作用了。

component.html 代码

<a class="dropdown-item" (click)="GetProductList(subitem.SubCategoryID)">
 <i class="mdi mdi-chevron-right" aria-hidden="true"></i> 
 {{ subitem.SubCategoryName}}
</a> 

GetProductList(SubCategoryID){ 
    this.router.navigate(['/productlist',SubCategoryID]); 
}

Answer 1

因为对于 Angular，它是相同的路线 - 它不会重新加载。

两种可能的解决方案：

1. 在组件中订阅 this.route.params 并做出相应的反应，就像在Angular 4 routerLink - reloading current route中一样

2. 在 Angular 5 中有一个用于重新加载活动路由的选项：

RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'}

试试看

Answer 2

好的，对此有很多不必要的黑客攻击（甚至由于内存泄漏而很危险......），但正确的（预期的）方法是订阅路由的参数更改，然后绑定的表单应该在你重新加载时更新你的数据：

ngOnInit() {
  this.route.paramMap.subscribe(params => {
     this.myParam = params.get("id");
     this.loadData();
  })
}

注意：这里的路由是从'@angular/router'导入的ActivatedRoute；

但是，如果您仍然想要完全刷新，您可以设置一个虚拟根/组件，它会将您重定向回来。

Answer 3

对我来说，这个工作的 NgOnit 不是通过导航到相同的路线来调用的，所以我在构造函数中使用了订阅，它就像魅力一样工作

  constructor(private route: ActivatedRout) {
         route.params.subscribe(val => {
            ///  your NgOnit code
            }
        }

Answer 4

import { NgModule, Injectable } from '@angular/core';
import { Routes, RouterModule, RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

const routes: Routes = [
  
];
@Injectable()
export class MyStrategy extends RouteReuseStrategy {
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {
    return null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', initialNavigation: 'enabled' , onSameUrlNavigation: 'reload'}),
  ],
  providers: [{provide: RouteReuseStrategy, useClass: MyStrategy}],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 5

我已经为路由器上的同一页面使用不同的别名解决了这个问题。

如果原来的路径是这样的：

<a [routerLinkActive]="['active']" [routerLink]="['/listapersonas', tokenid]">Link</a>

{ path: 'listapersonas' , component: ListaPersonasComponent, canActivate: [ AuthGuardRole ] },

可以像这样重定向到同一个地方：

<a [routerLinkActive]="['active']" [routerLink]="['/listapersonasotheralias', tokenid]">Link</a>

{ path: 'listapersonasotheralias' , component: ListaPersonasComponent, canActivate: [ AuthGuardRole ] },

反正这是作弊，不是解决办法。

Answer 6

试试这个方法。

<a [routerLink]="['/productlist']" [queryParams]="{id: 1}"> // Set dynamic
   link
</a>

另一种方式是：

<a  [routerLink]="[ '/productlist',1000]">Link</a>

通过这种方式，您不需要调用任何函数。 For more information 请阅读这个。