Question

我一直在研究重新加载Angular 4+路线，看起来好像首选方法是在组件中监听URL参数更改，然后重新初始化组件。

我遇到的问题是，当网址相同（包括参数）时，尝试找到DRY（不要重复自己）方法，使这项工作跨多个组件。在AngularJS中，UI-router很简单。

使用案例

我有一个通知面板，可以＆＃34;浮动＆＃34;在任何路线上方，当点击通知时，它需要转到与其相关的内容 - 这可以是许多不同类型的内容。

例如：/posts/:id或/groups/:id或/users/:id

如果用户已在查看该内容，则不会重新加载和刷新以反映通知的消息。 I.e＆＃34; John Doe评论了你的帖子＆＃34; （用户可能正在查看该帖子的过时版本）或者＃34; Jane Doe接受了您加入Some Group＆＃34; （用户可能正在查看该组的访客视图）。

我确实在检测到路线相同时使用了window.location.reload()，并且可以正常工作，但是由于它产生的开销导致非常不受欢迎（角度重新初始化），auth检查，套接字重新连接等）。

任何建议都将不胜感激！

Answer 1

您必须订阅路由参数，以便无论何时更改，我们都可以处理更改。下面是我的项目中的示例代码，该代码运行正常。

constructor(private router: Router) {
    this.route.params.subscribe(params => {
      this.initializePage(params['id']);
    });
}

initializePage(id:any){
//..Your code
// Consider this as your ngOnInIt() method and initialize everything here.
}

此处，当参数值以相同的路径在URL中更改时，它不会重新加载页面，而只是更改值，就像我们调用 initializePage（id）一样，它将重新初始化所有内容。

希望这对您有所帮助。

Answer 2

当URL中没有任何更改时，无法重新加载路由。实际上，您拥有的唯一选项是console并且会听取参数更改。

对于第二个选项，您可以创建一个通用服务，该服务将监视查询字符串中window.location.reload()参数的更改。我们称之为id，它看起来像这样：

IdWatchService

然后，您可以将此服务添加到需要对更改做出反应的组件的@Injectable() export class IdWatchService { constructor(private route: ActivatedRoute) { } get idChange(): Observable<number | undefined> { return this.route.queryParams.map(p => p['id'] as number | undefined).distinctUntilChanged(); } }列表中providers，PostsComponent等。最后，您可以将它注入相同的组件并订阅GroupsComponent observable：

idChange

Answer 3

我在角度2中遇到了相同的场景（非常类似的用例）。就像其他答案所说的那样，我发现没有内置的角度来做这个（也许框架假设是这样的情况应该解决只是通过听取参数的变化。）

和你一样，我不想重写我的代码，所以我使用了一个不同的解决方案，它有点多hacky，但它的工作没有太多需要改变。

我使用的解决方案是在相同的雇佣级别下创建一个虚拟路径，您需要重新加载页面。在虚拟路径中，我使用了DummyComponent，它在路径中接收params数据，描述我们需要去的下一条路线（我们想要重新加载的路线）以及我应该传递给它的哪些参数（例如id you已经提到了）然后我使用注入的Rounter类和导航方法去那条路线。

我认为这个解决方案比使用window.reload更有效，而且编写非常简单。（我无法复制该代码示例，因为我无权访问该代码）

Answer 4

在这种情况下，您的路线不会发生变化，只会更改参数。

要解决此问题，您需要订阅ActivatedRoute参数。

export class MyClass implements OnInit {
   constructor(private activatedRoute: ActivatedRoute ) {
        this.activatedRoute.params.subscribe((params)=>{
          console.log('updatedParams', params);
        });
    }
}

Answer 5

我在标题中的通知部分遇到了同样的问题我用DoCheck解决了这个问题

import { Component, DoCheck } from '@angular/core';

在Class中实现DoCheck接口

export class HeaderComponent implements DoCheck {

然后使用ngDoCheck（）方法并验证变量值是否更改，它将在通知区域中显示相同

ngDoCheck() {
    // check if values changes
}

Answer 6

按this.router.url，您将获得当前页面的网址。比使用queryParames使用路由器导航。以下是将queryParams作为分页页面传递的示例。你可以使用类似的approch。

const url = this.router.url.split('?')[0]; // this will remove previous queryparms
    this.router.navigate([url], { queryParams: { page: $event } });

Answer 7

window.location.reload（）;

这对我有用。

使用相同的URL参数重新加载Angular 4+路由

7 个答案: