angular2路由 – 浏览到不刷新组件的同一路由?

前端之家收集整理的这篇文章主要介绍了angular2路由 – 浏览到不刷新组件的同一路由?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已升级为使用路由器不推荐使用新的Angular 2路由器,一些行为已经改变.

我遇到的页面是一个搜索页面.我们选择使用HashLocationStrategy将所有搜索字词放在网址中.路线如下所示:

const routes: RouterConfig = [
  { path: '',component: HomeComponent },{ path: 'search/:term/:cat/:page/:sort/:size/:more',{ path: 'search/:term/:cat/:page/:sort/:size',{ path: 'search/:term/:cat/:page/:sort',{ path: 'search/:term/:cat/:page',{ path: 'search/:term/:cat',{ path: 'search/:term',{ path: 'details/:accountNumber',component: DetailsComponent }
];

我知道一个查询字符串方法可能更适合所有这些选项,但由其他人决定的项目需求…

无论如何,如果我导航到localhost /#/ search /你好使用this.router.navigate([‘/ search / Hello’]);那么路由器工作正常,一切都很好.在该页面上,如果我尝试this.router.navigate([‘/ search / World’]);那么浏览器地址栏中的URL会相应更新,但是组件根本不会更改.

以前我可以使用routerCanReuse来表示我想要重用搜索组件,并且当导航发生时,routerOnReuse会重新运行搜索.我没有看到等同于这些在@角/路由器.如何使用新的URL参数重新加载当前路由?

我正在运行版本2.0.0-rc.3 for Angle 2和3.0.0-alpha.8 of @ angular / router.

如果只有params有更改,组件本身将不会再次初始化.但您可以订阅发送的参数的更改.

例如,在ngOnInit方法中,您可以执行以下操作:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       const term = params['term'];
       this.service.get(term).then(result => { console.log(result); });
     });
  }

猜你在找的Angularjs相关文章