Question

我有一个页面，点击一个按钮，它将使用下面的路由器导航重定向

router.navigate (['search', {data: 'test'}]).

但是当我第二次点击同一个按钮而不更改值时，router.navigate将无效。我怎样才能覆盖它。

欢迎所有的想法！

Answer 1

Angular路由器以这种方式工作，因此如果activeRoute没有更改，则页面/组件不会再次加载。

如果您要传递参数，例如：{data：＆＃39; test＆＃39;}那么您可以通过订阅路线参数来观察这些参数更改：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
   this.route.params.subscribe(params => {
     // each time the search data is change you'll get this running
     //Do what ever you need to refresh your search page
     console.log('New route params');
   });
}

Answer 2

 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和数据。

Link to original GitHub feature request

归功于GitHub上的 mihaicux2 。

我在版本4.0.0-rc.3上使用import { Router, NavigationEnd } from '@angular/router';

对此进行了测试

Answer 3

要在再次导航到当前URL时重新加载网站，可以使用Router ExtraOption：onSameUrlNavigation: 'reload'（需要Angular 5.1）

const routes: Routes = [
  ...
];

const config: ExtraOptions = {
  onSameUrlNavigation: 'reload'
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

要再次调用该组件的ngOnInit，我还必须使用：

export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }
}

Answer 4

我在Angular 9应用程序中遇到了类似的问题。以下对我有用

 constructor(private route: ActivatedRoute) { 
  }

  ngOnInit(): void {
    this.paramSub = this.route.params.subscribe(
      params => (this.Id = parseInt(params['Id']))
    );
  }

  ngOnDestroy(){
    this.paramSub.unsubscribe();
  }

Angular 2路由器导航无法使用相同的URL第二次工作

4 个答案: