web-dev-qa-db-ja.com

Angular 6ルーティングリダイレクト

私はAngularを初めて使用し、管理ダッシュボード用の最初のAngularアプリケーションを作成しました。

2つのレイアウトを設定する必要があります

  1. ログイン、ログアウト、パスワードを忘れたなどの認証
  2. ログイン後に管理ダッシュボードが表示されます

そのため、2つのレイアウトコンポーネントをセットアップしました

  1. 管理者レイアウト
  2. auth-layout

そして、すべての認証コンポーネントを認証モジュールに入れます

私のアプリケーションのディレクトリ構造は

app
|- e2e
|- node_modules
|- src
   |- app
      |- auth (module)
         |- login (component)
            |- login.component.ts
            |- login.component.html
         |- register (component)
            |- register.component.ts
            |- register.component.html
         |- auth.module.ts
      |- dashboard (component for auth users)
         |- dashboard.component.ts
         |- dashboard.component.html
      |- layouts ( directory)
         |- admin-layout (component)
            |- admin-layout.component.html
            |- admin-layout.component.ts
            |- admin-layout.module.ts
            |- admin-layout.routing.ts
         |- auth-layout (component)
            |- auth-layout.component.html
            |- auth-layout.component.ts
            |- auth-layout.module.ts
            |- auth-layout.routing.ts
      |- app.component.html
      |- app.component.ts
      |- app.module.ts
      |- app-routing.module.ts
   |- assets
   |- index.html

app-routing.module.tsの内容

import { NgModule } from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HttpClientModule} from '@angular/common/http';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ComponentsModule} from './components/components.module';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    AuthLayoutComponent
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.tsの内容

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {AuthLayoutComponent} from './layouts/auth-layout/auth-layout.component';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: '', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

admin-layout.routing.tsの内容

import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';

export const AdminLayoutRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent}
];

admin-layout.module.tsの内容

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { IconsComponent } from '../../icons/icons.component';
import {ChartsModule} from 'ng2-charts';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    ChartsModule,
    NgbModule
  ],
  declarations: [
    DashboardComponent,
    IconsComponent
  ]
})
export class AdminLayoutModule { }

auth-layout.module.tsの内容

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {AuthLayoutRoutes} from './auth-layout.routing';
import {FormsModule} from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {AuthModule} from '../../auth/auth.module';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AuthLayoutRoutes),
    FormsModule,
    NgbModule,
    AuthModule
  ],
  declarations: [
    LoginComponent,
    RegisterComponent
  ]
})
export class AuthLayoutModule { }

auth-layout.routing.tsの内容

import {Routes} from '@angular/router';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';
import {ForgotPasswordComponent} from '../../auth/forgot-password/forgot-password.component';
import {ResetPasswordComponent} from '../../auth/reset-password/reset-password.component';

export const AuthLayoutRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'forgot-password', component: ForgotPasswordComponent},
  {path: 'reset-password', component: ResetPasswordComponent}
];

質問

localhost:4200にアクセスすると、localhost:4200/dashboardにリダイレクトされ、dashboardパスが管理者のルーティングで設定されているように機能します。

ただし、localhost:4200/loginにアクセスすると、localhost:4200にリダイレクトされ、認証ルーティングからログインルーティングが機能しません。

アプリコードのURL： https://stackblitz.com/edit/angular-lwevqj
アプリのURL： https://angular-lwevqj.stackblitz.io

angularangular-routing
3
Anuj TBE

あなたのルートは次のようになります-

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'admin', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: 'auth', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];

また、認証ルートは次のようになります-

export const AuthLayoutRoutes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'forgot-password', component: ForgotPasswordComponent},
  {path: 'reset-password', component: ResetPasswordComponent}
];

通話は-

ログインする - localhost:4200/auth/login 登録 - localhost:4200/auth/register同様にその他

6
eduPeeth

メインルートを変更する必要があります（ ''を 'login'に置き換えます）、問題はここにあると思います：

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: 'login', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];
0
simpleDmitry

ダッシュボードコンポーネントへの呼び出しをリダイレクトするためにグローバルルーティングファイルが上部で定義されているため、/dashboardにリダイレクトしています。

グローバルルーティングファイルの最初のpath定義を参照してください

このangularプロジェクトでは、階層が構築されています。ユーザーが最初にダッシュボードに移動すると想定されています。

ログインコンポーネントに直接移動する場合は、グローバルルーティングファイルのログインコンポーネントルートに/loginを追加するだけです。

ただし、ログインモジュールのルーティングに注意してください。依存するURLが本当に必要な場合にのみ、/child1/child2という形式の子ルーティングを使用することをお勧めします。

一部のコンポーネントを/nameの形式にする場合、それらはグローバルに存在する必要があります。

詳しくは Angular 6 Docs をご覧ください。

0
Anshuman Upadhyay

このコードを使用しています{path： ''、redirectTo： 'dashboard'、pathMatch： 'full'} in (app-routing.module.ts)localhost：4200にアクセスすると、ファイルはlocalhost：4200/dashboardにリダイレクトされ、ダッシュボードとして機能します。

{path： ''、redirectTo： 'login'、pathMatch： 'full'}このコードを使用する場合、最初にデフォルトでリダイレクトするパスの場所を設定します次に、localhost：4200と入力すると、URLがログインコンポーネントに自動的にリダイレクトされます。

0
nagender pratap chauhan