URL段更改后如何重新加载路由子组件？

Question

对于不同的项目，我的路线是相同的。因此，显示的所有内容仅取决于:projectId：

  {path: 'projects/:projecteId', children: [
    {path: 'info', component: InfoComponent},
    {path: 'settings', component: SettingsComponent},

  ], canActivate: [ProjectGuard]},

  // Other routes ..
  {path: 'account', component: AccountComponent]

在工具栏中，我可以选择一个项目-与在GAE控制台中可以执行的操作类似：

我想知道如何对projectId进行检测以进行更改并更新所有受影响的组件。

如您所见，我有一个ProjectGuard-这个想法是要有一个守卫，该守卫观察ProjectService提供的对象，并在选择更改时应用更改。但是，我不确定这是否是可行的解决方案，也不确定是否有更好的，更像Angular的方式来做类似的事情。

我真的需要这里的警卫吗？

Answer 1

在要为path: 'projects/:projecteId'加载的组件中，您可以注入ActivatedRoute并听其上的params观察。

params中的更改将运行您的代码：

假设您打开一个ProjectComponent，则可以执行以下操作：

import { ActivatedRoute } from '@angular/router';

@Component({...})
export class ProjectComponent  {
  projectId;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.projectId = params['projecteId'];
      // Here you'll always get notified when `projecteId` changes.
      // You can do the needful from here.
    });
  }

}

更新：

如果有CanActivate卫兵，则可以在canActivate内部使用ActivatedRouteSnapshot。上面还有一个params，它是一个对象，但带有更新的params

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ProjectGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Here the `next.params.projectId` will always give you updated projectId
    ...
  }
}

您可以注意params.projectId，然后使用某种服务来存储projectId的先前值。您可以将其与projectId的当前值进行比较，以检查该项目是否确实从下拉列表中进行了更改。然后，您可以将该服务作为依赖项注入到ProjectGuard中，您会很方便。

---

这是您推荐的Sample StackBlitz。