27

無効なパスが入力された場合、特定のルートにリダイレクトするように Angular2 ルーターを構成する方法はありますか?

たとえば、3 つのルートがある場合:
/home
/about
/404

/trains (ルート構成に存在しないルート) を入力すると、ルーターに 404 にリダイレクトさせたいと思います。

4

1 に答える 1

43

新しい @angular/router の更新

新しいルーターは、パス指定により、欠落しているルートをより適切に処理し'**'ます。

rootRouterConfigにコンポーネントを catch-all として追加すると、ルート レベルおよびネストされた子の内部でも不正なルートが検出されます。つまり、それを最上位レベルに含めるだけで済みます。ng2 ヒーローの例を取り上げると、これは次のようになります。

export const routes:RouterConfig = [
  ...HeroesRoutes,
  { path: 'crisis-center', component: CrisisListComponent },
  // Show the 404 page for any routes that don't exist.
  { path: '**', component: Four04Component }
];

Sharpmachine のコメントに従って、すべてのキャッチオール ルートが他のルートの後にリストされていることを確認してください。現在のルーターは、「特異性」(nginx スタイル) ではなく「最初の一致」(エクスプレス スタイル) ルーティングに基づいているように見えますが、その不安定さのレベルにより、これは将来変更される可能性があります。キャッチオールを最後にリストすると、両方の条件で機能するはずです。

@ angular/router-deprecated の元の回答

これについても良い情報を見つけることができず、最終的な ng2 リリースに向けて適切なパターンが移動する可能性があります。ベータ版ですが、以下の作品が見つかりました。

constructor(
  private _router: Router,
  private _location: Location
) {
  _router.recognize(_location.path()).then((instruction: Instruction) => {
    // If this location path is not recognised we receive a null Instruction
    if (!instruction) {
       // Look up the 404 route instruction
       _router.recognize('/404').then((instruction: Instruction) => {
         // And navigate to it using navigateByInstruction
         // 2nd param set to true to keep the page location (typical 404 behaviour)
         // or set to false to 'redirect' the user to the /404 page 
         _router.navigateByInstruction(instruction, true);
      });
    }
  });
}

このコードは子ルートでも機能することがわかりました。つまり/cars/...、RouteConfig 内にあり、ロケーション パスが子の車のルートのいずれにも一致しない場合、親の命令に対して null 値を受け取ります。これは、トップレベルのメイン コンポーネントでのみこのコードが必要であることを意味します。

ただし、将来これを行うためのより簡単で明示的な方法があることを願っています。

于 2015-12-29T04:34:57.450 に答える