angular - angularのガードから子ルートにリダイレクトする方法

Question

子ルートを直接アクセスから保護しながら、親ルートのガードから子ルートにリダイレクトするにはどうすればよいですか?

絶対ナビゲーションの問題は、子ルートに移動するときに親コンポーネントのガードがループで再度呼び出されます。

相対ナビゲーションの問題は、ガードが親ルートを保護しているため、相対的にナビゲートするアクティブ化されたルートがまだないことです。また、これはおそらく子ルートを保護しません。おそらく、子ルートまたは CanActivateChildren でも同じガードを使用できます。

Stackblitz の例: https://stackblitz.com/edit/angular-qbe2a7

ルート

const appRoutes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    canActivate: [ RedirectionGuard ],
    children: [
      {
        path: 'foo-child',
        component: FooChildComponent
      }
    ]
  }
];

ガードの canActivate()

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {

    console.log('guard: ', route, state, this.route);

    // idea: create own ActivatedRoute and give it the values from ActivatedRouteSnapshot which knows about 'foo/'
    const foo: ActivatedRoute = new ActivatedRoute();
    console.log(foo);

    // Error: Cannot match any routes
    // I think because there is no route to be relative to when canActivat is called. Router has not yet navigated to '/foo/'
    this.router.navigate(['../foo-child'], {               relativeTo: this.route
    });

    // Errors with infinite loop because '/foo/' has this guard which will then be called again
    //this.router.navigate(['/foo/foo-child']);

    // navigate returns true also. maybe just return that.
    return true;
  }

*あなたが尋ねるかもしれないすべてのチャイルドにガードを追加してみませんか. アプリの状態に応じて、親ルートから多くの異なる子ルートにリダイレクトする必要があります。現在、子ルートの 1 つを使用してそのコンポーネントからリダイレクトしていますが、ユーザーによる直接ナビゲーションから子ルートを保護していません。