导航到同一条路线不刷新组件？

Posted 2023-02-22

【中文标题】导航到同一条路线不刷新组件？

【英文标题】：Navigating to the same route not refreshing the component?

【发布时间】：2016-11-02 19:07:59

【问题描述】：

我已经升级为使用路由器已弃用的新 Angular 2 路由器，并且一些行为发生了变化。

我遇到问题的页面是搜索页面。我们选择使用HashLocationStrategy 将所有搜索词放在URL 中。路线如下所示：

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 
];

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

无论如何，如果我使用this.router.navigate(['/search/Hello']); 导航到localhost/#/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。

【问题讨论】：

我面临同样的问题。你能告诉我我可以在哪里把这段代码放在 app.component.ts 页面或实际页面上（没有重新加载）。还有一件事是 ** this.service.get(term).then(result => console.log(result); );**。你能简单解释一下吗？

【参考方案1】：

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

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

【讨论】：

小心。这将影响全局路由器组件，并且您的内部路由器链接将停止工作。

【参考方案2】：

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

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

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

Here你可以找到如何从解析器中的api请求数据。

【讨论】：

嘿@Marria，route.paramsMap 只会在参数更改时发出值。就我而言，如果我再次导航到 /path;param=1 。希望这个 route.paramsMap 再次发出值。我也尝试过replaceUrl 标志，但它不会在具有相同参数的同一路由上触发`this.router.navigate(['path', params], replaceUrl: true );`

【参考方案3】：

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

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

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

【讨论】：

我真的很好奇为什么参数是 Observable。这解释了它并且很有意义。

我不明白这个。问题——或者至少是我的问题——是当使用不同的参数值调用相同的路由时，ngOnInit 函数不会再次运行。那么这有什么帮助...？

这个想法是angular不需要再次安装组件。只有数据有变化，特别是路线数据。所以你所拥有的是一个函数，它会在路由数据发生变化时调用，你可以对这个变化做出反应。

我明白了..订阅参数值更改..但还需要一些其他配置..我正在订阅参数更改..但组件仍在重新加载..

@Lakshay google 获取自定义路由重用策略或查看this answer