Angular9の同じルートパスの異なるコンポーネント

Question

同じ構造を共有する一連のURLの正しいパスを解決しようとしています。私には道が/:id/:areaIdあり/:id/:cityId、これはSEOの理由から設計によって行われます。それを実装するときは:areaId、（API呼び出しを行うことによって）存在するかどうかを知る必要があります:cityId。存在しない場合は、存在するかどうかを確認してナビゲートしようとします。

私が最初に考えたのは、canActivateサービスを注入する必要があり、それが私には自然に思えたので、私のルートにあることでした。ガードを実装してareaコンポーネントに適用しましたが、ここでの問題canActivateはfalse、ナビゲーションが停止したためです。urlMatchersの使用について読んでいますが、セグメントに必要なすべての情報があるとは思いません。同じルートでAngular 2の異なるコンポーネントなどを使用してサービスを挿入するのは間違っているようです。また、直接ナビゲートしようとすると失敗します。ホーム経由でナビゲートするのではなく、URLに移動します-直接ナビゲートする場合、インジェクターは定義されていません。

私の質問は、ガードなどを使用して、ガードの結果が偽の場合に「次に一致するURLに移動」できますか？

参考までに、私の警備員は次のようになります。

@Injectable()
export class AreaGuard implements CanActivate {
    constructor(private areasService: AreasService) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const areaId= route.params['areaId'];
        return this.areasService.isArea(areaId)
                                .then(a => {
                                    return true;
                                })
                                .catch(e => {
                                    console.log('Checking area', e);
                                    return false;
                                });
    }
}

Answer 1

もし私があなたなら、Componentこの仕様を処理するためにを作成します。その中でHTTP呼び出しを行うGuardsことは、私がお勧めしないことです。

ルートは1つだけで、新しく作成したコンポーネントをロードできます。HTTP呼び出しを行うと、簡単*ngIfにロードするコンポーネントを決定できます。