如何手动触发路由解析器答案

【问题标题】：How to trigger route resolver manually如何手动触发路由解析器
【发布时间】：2017-06-07 21:00:14
【问题描述】：

在访问我的用户页面的帐户片段之前，我正在解析用户：

app-routing.component.ts

{
  path: 'users/:id',
  component: UserComponent,
  resolve: {user: UsersService},
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'account'},
    {path: 'account', component: UserAccountComponent},
    {path: 'sites', component: UserSitesComponent}
  ]
}

users.service.ts

resolve(route: ActivatedRouteSnapshot, r: RouterStateSnapshot) {
  return this.getUser(route.params['id']);
}

user-account.component.ts

ngOnInit() {
  this.route.parent.data.subscribe(data => {
    this.user = data['user'];
    // Initialize the form and its validators
    this.initForm();
  });
}

在用户帐户组件中，我可以保存或重置表单。在这两种情况下，我都想更新组件的用户并重置表单和验证器。理想情况下，它希望再次触发订阅。

知道如何手动触发解析器吗？

（我曾经以与最后一个片段为模的随机数重新导航到相同的路由，但是由于我将用户页面分解为父/子路由，因此在最后一个片段时不再调用父级中的解析器片段变化）

【问题讨论】：

另一种方法是使用服务而不是解析器。 stackoverflow.com/questions/39762485/… 中提到的自定义重用策略也可能起作用

标签： angular angular2-routing resolver

【解决方案1】：

如果您需要针对特定条件（特定查询参数，...）重新运行守卫和解析器，还有更灵活的选项可以将函数传递给路由模块中的 runGuardsAndResolvers。示例：

const routes: Routes = [
  {
    path: 'home/:id',
    component: HomeComponent,
    ...
    runGuardsAndResolvers: (curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot) => {
      // inspect the current router state and then return true|false
      return false;
    }
  }
];

示例取自以下文章：

https://juristr.com/blog/2019/01/Explore-Angular-Routers-runGuardsAndResolvers/

【讨论】：

【解决方案2】：

我同意“Woot”，但是如果您想再次触发解析器，请转到您的路由模块并添加

runGuardsAndResolvers: "always"

现在您可以再次在同一页面上导航，解析器将再次运行。但请注意，只有解析器会再次运行，没有其他生命周期，例如“ngOnInit”。

根据你的代码示例

app-routing.component.ts

{
  path: 'users/:id',
  component: UserComponent,
  resolve: {user: UsersService},
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'account'},
    {path: 'account', component: UserAccountComponent, runGuardsAndResolvers: "always"},
    {path: 'sites', component: UserSitesComponent}
  ]
}

现在，如果您再次路由到同一页面，您的 user-account.component.ts 上的订阅将再次被触发

【讨论】：

【解决方案3】：

通常您不想手动触发路由解析器。

由于您的解析器看起来是您服务的一部分，并且它所做的只是调用 this.getUser(id)，因此您可以在进行更改后轻松调用它。

在这种情况下我要做的是将我的服务注入到我的类中，然后在更新用户的操作之后调用 this.getUser(id)。

可能的实现

export class UserAccountComponent implements OnInit {
  userId: number;
  constructor(private route: ActivatedRoute, private userService: UserService) {}

  ngOnInit() {
    this.route.params.pipe(
      do((params) => {
        this.userId = +params['id'];
      }),
      take(1)
    );
  }

  doSomeChange() {
    // this will execute a change and update the user.
    this.userService.get(this.userId);
  }
}

注意：我使用的代码依赖于 rxjs 5.5 此外，您的服务必须包含在您的提供程序中才能正常工作

【讨论】：