web-dev-qa-db-ja.com

Angular 2ルーティングは子ルートでリダイレクトします

私はAngularの初心者です。2.アプリのすべての部分に独立したモジュールを作成したい。たとえば、デフォルトコンポーネント-子コンポーネント（SignInまたはSignUp）のルーターアウトレットを含むAuthComponentでAuthModuleを作成しました。そこで、次のシナリオを実現したいと思います。

  1. /にナビゲートするとき-アプリのルート-/ authにリダイレクトする
  2. / authへのリダイレクト後-AuthComponentをルーターアウトレットでロード
  3. AppComponentのロード後-/ auth/sign-inへのリダイレクトを介してデフォルトのサインインコンポーネントをロードします

しかし、localhost /にアクセスすると、/ authへのリダイレクトが必要なものになりますが、サインインへの次のリダイレクトは表示されません。

私のコード：app.routing

const routes: Routes = [
  {path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routing

const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {path: '', redirectTo: 'sign-in', pathMatch: 'full'},
      {path: 'sign-in', component: SignInComponent}
    ]
  },

];

export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);

auth.component.html

<div class="container">
    <h1>Auth component</h1>
    <router-outlet></router-outlet>
</div>

結果：

code

result

環境@ angular/cli：1.0.0-rc.2ノード：7.7.1 os：win32 x64

angularroutingchildren
26
Timofey Orischenko

私も同じ問題を抱えています。 Angularトリックのようです： 'redirectTo'フィールドの先頭のスラッシュを削除すると、アプリケーションは認証/サインインにリダイレクトされます。

App.routingでこれを使用します。

const routes: Routes = [ 

    {path: '', redirectTo: 'auth', pathMatch: 'full'}, 

];

「redirectTo」値は「/」で始まる=絶対パス

「redirectTo」の値は「/」なしで始まります=相対パス

それについてもっと読む： https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

P.Sあなたの構造はYounesMの構造よりも正確であるとの私の意見。親モジュールは子ルートを保持できません。「app」モジュールは、「auth」モジュールに子モジュール「sign-in」があることを知りません。

29
Dmitriy Ivanko

そのため、redirectTo:'auth'が''の子コンポーネントをロードしようとしますが、コンポーネントがないため、ルーターアウトレットは空です。

{path: '', redirectTo: 'sign-in', pathMatch: 'full'}には他の目的がないため、sign-inにリダイレクトするように見えるので、代わりに/auth/sign-inにリダイレクトできます。

app.routes

const routes: Routes = [
  {path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {path: 'sign-in', component: SignInComponent}
    ]
  },

];

または、リダイレクトの代わりに''パスにコンポーネントがあります。

app.routes

const routes: Routes = [
  {path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {path: '', component: SignInComponent}
    ]
  },

];
5
YounesM

とても簡単です：

const routes: Routes = [
    { path: '', redirectTo: '/auth/signin', pathMatch: 'full' },
    { path: 'auth', component: AuthComponent, 
        children: [
            { path: 'signup', component: SignupComponent }, 
            { path: 'signin', component: SigninComponent }, 
            { path: 'logout', component: LogoutComponent }
        ]
    },
    { path: '**', redirectTo: '/auth/signin', pathMatch: 'full' }
];
1
user2912589

auth.routesで

    const routes: Routes = [
    {
            path: 'auth',
            redirectTo: 'auth/sign-in'
      },
    {
        path: 'auth',
        component: AuthComponent,
        children: [
          {path: 'sign-in', component: SignInComponent}
        ]
      },

    ];
1
Chema

次のように、外部モジュールでリダイレクトを使用できます。

// Root routing module or app.routing.module
const routes: Routes = [
  {path: '', redirectTo: '/auth', pathMatch: 'full'},
  {path: 'auth', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];

// Child routing module or child.routing.module
const routes: Routes = [
 {
   path: 'auth',
   //component: AuthComponent, may not need this as you only need the template
   children: [
     {path: 'sign-in', component: SignInComponent}
   ]
 },
];

適切なパスでこれにナビゲートしたい場合、子コンポーネントに空のパス ''を持つ必要はありません

1
bitscanbyte

私も同じ問題を抱えていますが、上記の答えはどれも良い解決策ではないようです。私のコードでは、ルーターイベントをサブスクライブし、最終的に解決します。

authComponentのコンストラクターのコード：

  this.router.events.subscribe((e: Event) => {
   if (e instanceof NavigationEnd) {
    this.activeUrl = e.urlAfterRedirects || e.url;
    if (this.activeUrl === '/auth') {
      this.router.navigateByUrl('/auth/sign-in');
    }
   }
  });
0
johney

子ルートでこれを行うことができます。

const routes: Routes = [
  { path: 'auth', redirectTo: 'auth/signin'},
  {
    path: 'auth',
    component: AuthComponent,
    children: [{ path: 'signin', component: SignInComponent }],
  },
];
0
papiliond