モジュール間で角度をつけてルーティングする

私は単純な角度のアプリケーションを構築しています。 2つのモジュールが学生そして先生。私のプロジェクトがどのように整理されたのか

最初にユーザーがアプリケーションに入ると、彼は先生か学生かを選択できます。

対応するモジュールにリダイレクトされるユーザーに応じて。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'student',
        loadChildren: () => StudentModule
    },
    {
        path: 'teacher',
        loadChildren: () => TeacherModule
    }
];

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


  }

ここに私ですapp.routing.tsファイル。

私の問題は、モジュールにリダイレクトされたときに、それらのモジュールのコンポーネント間をルーティングしたいときです。私は別のものを追加すべきか<router-outlet>各モジュールに入れるか、それとも唯一の方法で<router-outlet>にAppModule。

私は別のものを追加する必要がある場合<router-outlet>それらのモジュールのルータクラスをどのように書くべきですか？

hackerbuddy

출처 angular angular-routing ng-modules

2 답변

はい、個々のモジュールと提供する必要があるモジュールコンポーネントファイルにルーティングを定義する必要があります

以下はファイル構造でなければなりません

- Teacher 
   -teacher.component.html  --> here you should put <router-outlet>
   -techer-routing.module.ts --> here you need to define routes for teacher module
   -teacher.module.ts --> import techer-routing.module here
   -Logincomponent
        -login.component.html
        -login.component.ts
   -Homecomponent
        -home.component.html
        -home.component.ts

学生のための別のモジュールと同じです。

次のステップでは、教師モジュールの内部ルートを指定します。以下は、

teacher-routing.module.ts

教師用モジュールのサンプルルートは次のとおりです

 const routes: Routes = [
    {path: '', component: TeacherComponent, children: [
    {path: '', component: TeacherComponent,data: {title: "Teachers"}},
    {path: 'Home',  component:HomeComponent, data: {title: "Home"}},
    {path: 'Register',  component:RegisterComponent, data: {title: 
      "Register"}},
     ]
   }
 ]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})

export class TeacherRoutingModule{}

＆lt; router-outlet＆gt;を追加する必要があります。教師のモジュールで - hackerbuddy
はい、それを追加する必要があります。 - Parth Lukhi

レイジーローディング方法

// In app module route
{
 path: 'your-path',
 loadChildren: 'app/your.module#YourModule'
}

// in your module
const yourRoutes: Routes = [
  { path: '',  component: YourComponent }
];

export const yourRouting = RouterModule.forChild(yourRoutes);

@NgModule({
  imports: [
   yourRouting
  ],
  declarations: [
    YourComponent
  ]
})
export class YourModule{
}

怠惰なロード方法ではない

ちょうどインポートするYourModuleルートが遅延ロードされていなければ動作します。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    YourModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

いくつかの時間をかけて文書を読んでくださいhttps://angular.io/guide/router

この回答を確認https://stackoverflow.com/a/39284277/6786941

モジュール間で角度をつけてルーティングする

2 답변

リンクされた質問

関連する質問

最近の質問