Question

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

应用-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 ”。

根据您的代码示例

应用-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

如果需要针对特定条件（特定的queryparams等）重新运行防护和解析器，则还可以使用更灵活的选项将功能传递给路由模块中的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/

Answer 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 此外，您的服务必须包含在您的服务提供商中才能使用

如何手动触发路由解析器

3 个答案: