web-dev-qa-db-ja.com

ルートリゾルバーを手動でトリガーする方法

ユーザーページのアカウントフラグメントにアクセスする前にユーザーを解決しています）：：

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}
  ]
}

sers.service.ts

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

ser-account.component.ts

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

ユーザーアカウントコンポーネントで、フォームを保存またはリセットできます。どちらの場合も、コンポーネントのユーザーを更新し、フォームとバリデーターをリセットしたいと思います。理想的には、サブスクリプションが再度トリガーされるようにします。

リゾルバーを手動でトリガーする方法はありますか？

（以前は、最後のフラグメントと同じ乱数を法として同じルートに再ナビゲートしていましたが、ユーザーページを親/子ルートに展開したため、最後のフラグメントが変更されても、親内のリゾルバーは呼び出されなくなりました）

angularangular2-routingresolver
12
Max

「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
Murolack

通常、ルートリゾルバを手動でトリガーすることは望ましくありません。

リゾルバーはサービスの一部であるように見え、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に依存するコードを使用しています。さらに、これを機能させるには、プロバイダーにサービスを含める必要があります

0
Woot