如何手动触发路由解析器

Question

在访问之前我解决一个用户帐户片段我的用户页面:

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']);
}

用户account.component.ts

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

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

知道如何手动触发旋转变压器吗？

(我曾经重新导航到与最后一个片段模拟一个随机数的相同路径,但是由于我将用户页面分解为父/子路径,因此当最后一个片段发生变化时,不再调用父级中的解析器)

Answer 1

我同意“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上的订阅将再次触发

Answer 2

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

由于您的解析器看起来是您服务的一部分，并且它所做的只是调用 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 此外，您的服务必须包含在您的提供程序中才能正常工作