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

问题描述：

组件加载这条路线：

"departments/:id/employees"

到目前为止罚款。

后，我做了全成批量保存多个编辑表行的我想通过重新加载当前路线网址：

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

但什么也没有发生，为什么呢？

看看类似问题的这个答案：https://stackoverflow.com/a/44580036/550975 –

http://tech-blog.maddyzone.com/angularjs/javascript/how-reload-current- route-angular2非常有帮助 –

答

如果您的导航（）不会更改浏览器地址栏上已显示的URL，则路由器无事可做。刷新数据不是路由器的工作。如果要刷新数据，请创建一个注入组件的服务并调用服务上的加载函数。如果新数据将被检索，它将通过绑定更新视图。

现在你说我必须同意但是... angularjs ui路由器有一个重新加载选项，因此重新加载路由是判断;-)但是，我可以只是为该提示重新加载数据thx，这实际上是显而易见... – Pascal

+26

我不同意如果你想重新运行卫兵，说如果有人退出？ – Jackie

@Jackie我在想，也许你可以重新运行卫兵......如果他们有内置的重定向，那么这可能会诀窍。 – OldTimeGuitarGuy

答

只使用本地JavaScript重装方法：

reloadPage() { 
    window.location.reload(); 
}

这将重新加载整个应用程序，导致您丢失会话中存储的任何内容，例如用户信息，范围数据等。 –

不在会话中，但在内存中。会话数据应与sessionStorage API一起存储。 –

我可以理解2个不喜欢，3个不喜欢，4个...但是19个？ Come'n guys！ –

答

小技巧：使用相同的路径有一些虚拟的PARAMS。对于示例 -

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

Now：'this.router.navigate（['/ pocetna']，{queryParams：{'refresh'：1}}）;''和'route.queryParams.subscribe（val => myRefreshMethod（））' ：ActivatedRoute'被注入更新的组件...希望它可以帮助 –

答

我发现在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.tsngOnInit功能，它肯定工作。所有进一步点击同一链接现在重新加载component和数据。

Link to original GitHub feature request

幸得GitHub上mihaicux2。

我import { Router, NavigationEnd } from '@angular/router';

这是一个拯救生命。感谢ArgOn和mihaicux2 – laymanje

刚刚在Angular 4.4.x中尝试了这个，这完全有效。谢谢！ –

这对我来说很好，直到我实现了Material的导航标签栏来浏览我的应用中每条父路由的子路由。一旦用户点击运行此代码的页面，动画墨迹条就会消失。（为什么？我没有足够的时间或空间来解释......） –

答

测试这对4.0.0-rc.3版本这为我工作：

let url = `departments/${this.id}/employees`; 

this.router.navigated = false; 
this.router.navigateByUrl(url);

刚刚在Angular 4的最新版本中尝试了这一点，它不再有效。 –

答

发现并不需要与角的内部运作鼓捣一个快速而直接的解决方案：

基本上：只需创建一个替代路线与相同的目标模块，只需在它们之间切换：

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

而这里toggeling菜单：

<ul class="navigation"> 
    <li routerLink="/kreditgesuch-neu" *ngIf="'kreditgesuch' === getSection()">Kreditgesuch</li> 
    <li routerLink="/kreditgesuch" *ngIf="'kreditgesuch' != getSection()">Kreditgesuch</div> 
</li>

希望它能帮助:)

kreditgesuch ...听起来interessant：P – Pascal

答

在我的情况：

const navigationExtras: NavigationExtras = { 
    queryParams: { 'param': val } 
}; 

this.router.navigate([], navigationExtras);

工作正确

答

对我的作品与

硬编码

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

答

现在可以使用路由器配置的onSameUrlNavigation属性在Angular 5.1中完成此操作。

我添加了一个博客，解释如何在这里，但它的要点如下

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

在你的路由器配置使ngOnSameUrlNavigation选项，将其设置为'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(); 
    } 
} 
}

执行所有这些步骤后，您应该启用路由重新加载。

有没有一种方法来重新加载组件，而不是调用'init'函数， –

我不这么认为......除非您离开路线再返回。初始化函数不是世界末日，您可以控制初始化，以至于它与重新加载组件的效果相同。有没有什么特别的原因让你想在没有'init'的情况下完成重新加载？ –

我已经想出了解决我的问题的方案，谢谢你的回应，并且这个博客很有用。 –

答

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

答

reload current route in angular 2非常有帮助链接在angualr 2或4中重新加载当前路线

在此定义两种技术来做到这一点

与虚设查询参数
与虚设路线

更多见上文链路

答

尝试此

window.open（ '仪表盘'， '_self'）;

它的旧方法，但适用于所有角度版本，在路线上重定向并刷新页面。

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

相关推荐