Question

我已升级为使用路由器弃用的新Angular 2路由器，但某些行为已发生变化。

我遇到问题的页面是搜索页面。我们已选择使用HashLocationStrategy将所有搜索字词放入网址中。路线看起来像这样：

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

我知道查询字符串方法可能更适合所有这些选项，但项目要求由其他人决定......

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

以前我可以使用routerCanReuse表示我确实要重复使用搜索组件，而routerOnReuse会在导航发生时重新运行搜索。我在@angular/router中没有看到与这些相同的内容。如何使用新的URL参数重新加载当前路由？

我正在运行Angular 2的2.0.0-rc.3和@ angular / router的3.0.0-alpha.8。

Answer 1

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

例如，在ngOnInit方法中，您可以执行以下操作：

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

Answer 2

可能您根本不需要运行ngOnInit。这是角度路由器的优势。您可以在上一个答案中提到您可以做的事情-订阅params或paramsMap（带有Map界面的route.paramsMap: Observable<ParamMap>）。

还有另一种选择-您可以将数据检索用于保护并重新运行解析器和参数更改保护。将runGuardsAndResolvers: 'paramsOrQueryParamsChange'放入路由配置中。现在将是：

const routes: RouterConfig = [
{ 
     path: "search/:term/:cat/:page/:sort/:size/:more", 
     component: HomeComponent, 
     runGuardsAndResolvers: 'paramsOrQueryParamsChange' 
}, 
...];

Here，您可以找到如何在解析器中向api请求数据。

Answer 3

我遇到了同样的问题，并通过让路由器不重复使用路由来解决这个问题。这可以通过在构造函数中编写以下代码来完成：

constructor(
    private router: Router,
) { 
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
    };
}

导航到不刷新组件的相同路由？

3 个答案: