如何使用angular 2路由器重新加载当前路由

Question

我正在使用带有哈希定位策略的角度2.

该组件加载了该路由:

"departments/:id/employees"

到目前为止很好.

在我成功批量保存多个已编辑的表行后,我想通过以下方式重新加载当前路由URL:

this.router.navigate([`departments/${this.id}/employees`]);

但没有任何反应,为什么？

Answer 1

现在可以使用onSameUrlNavigationRouter config 的属性在Angular 5.1中完成此操作.

我添加了一个博客,解释了这里的内容,但其主旨如下

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

在路由器配置启用onSameUrlNavigation选项中,将其设置为'reload'.当您尝试导航到已经处于活动状态的路由时,这会导致路由器触发事件​​周期.

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

在路径定义中,设置runGuardsAndResolvers为always.这将告诉路由器始终启动警卫和解析器循环,触发相关事件.

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

最后,在要启用重新加载的每个组件中,您需要处理事件.这可以通过导入路由器,绑定到事件并调用重置方法来完成,该方法重置组件的状态并在需要时重新获取数据.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 initialiseInvites() {
   // Set default values and re-fetch any data you need.
 }

 ngOnDestroy() {
   if (this.navigationSubscription) {
     this.navigationSubscription.unsubscribe();
   }
 }
}

完成所有这些步骤后,您应该启用路由重新加载.

Answer 2

我在Angular的GitHub功能请求中找到了此解决方法:

this._router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
};

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

我尝试将其添加到我的app.component.ts ngOnInit函数中,它确实有效.所有进一步点击同一链接现在重新加载component和数据.

链接到原始GitHub功能请求

幸得mihaicux2 GitHub上.

我在版本4.0.0-rc.3上测试了这个import { Router, NavigationEnd } from '@angular/router';

Answer 3

在控制器中创建一个函数,重定向到预期的路由,如此

redirectTo(uri:string){
this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(()=>
this.router.navigate([uri]));}

然后像这样使用它

this.redirectTo('//place your uri here');

此功能将重定向到虚拟路由并快速返回到目标路由,而无需用户意识到.

Answer 4

我将这个用于 Angular 11 项目：

reloadCurrentRoute() {
    const currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS：已测试并适用于 7 以上的所有版本。

Answer 5

如果您的navigate()不会更改已在浏览器地址栏上显示的URL,则路由器无需执行任何操作.刷新数据不是路由器的工作.如果要刷新数据,请创建注入组件的服务并调用服务上的加载功能.如果将检索新数据,它将通过绑定更新视图.

Answer 6

有点棘手:使用相同的路径与一些虚拟参数.例如-

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

Answer 7

这就是我对Angular 9所做的。我不确定这在旧版本中是否有效。

当您需要重新加载时，您将需要调用它。

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

路由器 forRoot 需要将 SameUrlNavigation 设置为“重新加载”

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

并且您的每条路线都需要将 runGuardsAndResolvers 设置为“始终”

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

Answer 8

Angular 2-4路由重装黑客

对我来说,在根组件(组件,存在于任何路由上)中使用此方法可以:

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

Answer 9

这对我来说就像魅力

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));

Answer 10

在参数更改上，不会发生重新加载页面。这确实是个好功能。无需重新加载页面，但我们应该更改组件的值。paramChange方法将调用URL更改。这样我们就可以更新组件数据

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}

Answer 11

找到了一个快速而直接的解决方案,不需要修补角度的内部工作:

基本上:只需创建一个具有相同目标模块的备用路由,然后在它们之间切换:

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

这里的toggeling菜单:

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

希望能帮助到你 :)

Answer 12

对我来说可以硬编码

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

Answer 13

解决方案：

订阅 URL 参数并在那里初始化组件。没有技巧，只是“新 URL --> 新数据”，包括第一次加载。

对于 URL 参数（如/persons/:id）：

constructor(protected activeRoute: ActivatedRoute, ...) {
    this.activeRoute.paramMap.subscribe(paramMap => {
        const id = paramMap.get('id');    // get param from dictonary
        this.load(id);                    // load your data
    });
}

对于 URL 查询参数（如?q=...&returnUrl=...）（通常不需要）：

    this.activeRoute.queryParamMap.subscribe(queryParamMap => {
        const returnUrl = queryParamMap.get('returnUrl');
        ...
    });

问题的原因是：

当 URL 更改时，Angular 将尽可能重用旧组件以节省计算机资源。数据加载是您的自定义代码，因此 Angular 无法为您完成此操作。