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

Question

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

我遇到的问题是尝试找到一个DRY(不要重复自己)的方法来使这个工作跨多个组件,当URL相同(包括参数).在AngularJS中,UI-router很简单.

使用案例:

我有一个可以"浮动"在任何路线上方的通知面板,当点击通知时,它需要转到与之相关的内容 - 这可以是许多不同类型的内容.

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

如果用户已在查看该内容,则不会重新加载和刷新以反映通知的消息.即"John Doe对您的帖子发表评论"(用户可能正在查看该帖子的过时版本)或"Jane Doe接受您加入Some Group的请求"(用户可能正在查看该组的访客视图).

我确实window.location.reload()在检测到路由是否相同时使用了,并且可行,但由于它导致的开销(角度重新初始化,auth检查,套接字重新连接等),这是非常不受欢迎的.

任何建议将不胜感激!

Answer 1

当 URL 中没有任何更改时，无法重新加载路由。事实上，您唯一的选择就是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等）。最后，您可以将其注入到这些相同的组件中并订阅可idChange观察的：

@Component({
  templateUrl: './posts.component.html',
  providers: [
    IdWatchService
  ]
})
export class PostsComponent {
  constructor(idWatchService: IdWatchService) {
    idWatchService.idChange.subscribe(id => {
      // Load data for the new ID and refresh the view
    });
  }
}