Question

我正在尝试使用router.navigate在Angular 2中重新加载相同的URL，但它无法正常工作。网址：http://localhost:3000/landing 场景：我在http://localhost:3000/landing，现在我正在更改页面中应该重新加载页面的特定参数。

代码：

let link = ['Landing'];
this.router.navigate(link);

Answer 1

导航到某个虚拟组件，然后导航到要重新加载的组件。 //第二个参数_skipLocationChange = true以避免后退按钮中的url

this.router.navigateByUrl('/DummyComponent', true);
this.router.navigate(["Landing"]);

Answer 2

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

Answer 3

我设法在构造函数中使用PlatformLocation:onPopState和NgZone:run来实现重新加载组件。这是一个解决方法，但至少它按照需要的方式工作。

<template>
    <slot></slot>
</template>

constructor( private route: ActivatedRoute, public router: Router, private platformLocation: PlatformLocation, private ngZone: NgZone) { platformLocation.onPopState(() => { if(platformLocation.pathname.startsWith("/currentRoute")) { this.ngZone.run(() => { console.log("Reloading component"); }); } }); }被用作重新加载应该在浏览器后退/前进按钮上触发。此外，必须使用onPopState的检查，因为pathname方法在注入组件时在任何路由中的后退/前进时被调用。

如何在Angular 2中重新加载相同URL的组件？

3 个答案: