web-dev-qa-db-ja.com

Angular2条件付きルーティング

これは基本的な質問かもしれませんが、Angular2には条件付きルーティングを行う方法はありますか？または、誰かがルーターの外でそれをしますか？

Ui-routerにはこれを行う能力があることは知っていますが、Angular2sルーターに似たものは見ていません。

angularrouter
29
user3884414

update

新しいルーターでは、代わりにガードを使用できます https://angular.io/guide/router#milestone-5-route-guards

original（古くなったルーターの場合）

ここに示されているようにCanActivateライフサイクルフックを実装します Angular2ルーターのライフサイクルフック 。 https://angular.io/docs/ts/latest/api/router/CanActivate-var.html も参照してください

9
Günter Zöchbauer

前述のように、 Angular Route Guards は条件付きルートを実装するための良い方法です。 Angularチュートリアルはこのトピックについて少し説明が多いので、ここで例を使用して簡単に説明します。

1。ガードにはいくつかのタイプがあります。ロジックif (loggedIn) {go to "/dashboard"} else { go to "/login"}が必要な場合、探しているのはCanActivate- Guardです。 CanActivateは、「条件Yがすべて満たされた場合に新しいルートXをアクティブ化できます」として読み取ることができます。リダイレクトなどの副作用を定義することもできます。これがロジックに合わない場合は、Angular Tutorialページをチェックアウトして、他のガードタイプを確認してください。

2。auth-guard.service.ts。

3。auth-guard.service.ts次のコード：

import { Injectable } from '@angular/core';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isLoggedIn = false; // ... your login logic here
    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

}

4。ルートモジュールにauth-guard.service.tsを登録します。また、キーと値のペアcanActivate:[AuthGuardService]保護したいすべてのルートへ。次のようになります。

const appRoutes: Routes = [
  { path: '', component: LandingComponent},
  { path: 'login', component: LoginComponent},
  { path: 'signup', component: SignUpComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuardService]},
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    AuthGuardService
  ]
})
export class AppRoutingModule { }

これで開始できます。

最小限のデモを次に示します。 https://stackblitz.com/edit/angular-conditional-routing

38
bersling

特定のコンポーネントをリダイレクトするのではなくレンダリングする必要がある場合、次のようなことができます。

const appRoutes: Routes = [
  {
    path: '' ,
    component: (() => {
      return SessionService.isAnonymous() ? LoginComponent : DashboardComponent;
    })()
  } 
]

この例をランディングページに使用しました。以前にログインしていないユーザーには、ランディングページまたはダッシュボードダッシュボードが表示されます。

更新このコードは開発環境で動作しますが、ビルドされず、このエラーが発生します：

'AppRoutingModule'のテンプレートコンパイル中のエラーでのエラー 'ɵ0'のデコレータでは関数式はサポートされていません 'ɵ0'にはsrc/app/app.routing-module.ts（14,25）のエラーが含まれますエクスポートされた関数。

それを修正するために、次のように見える別のモジュールを作成しました

import {LandingPageComponent} from '../landing-page/landing-page.component';
import {DashboardComponent} from "../dashboard/dashboard.component";
import {SessionService} from "../core/services/session.service";

const exportedComponent = SessionService.isAnonymous() ? LandingPageComponent : DashboardComponent;

export default exportedComponent;

そして、その「工場」が提供するモジュールをインポートするだけです

import LandingPageComponent from './factories/landing-factory.component';
const appRoutes: Routes = [
  {
    path: '' ,
    component: LandingPageComponent
  },
]
4
Gregory Bluvshteyn