각 모듈 간 라우팅

간단한 각도 응용 프로그램을 작성하고 있습니다. 두 개의 모듈이 있습니다.학생과선생. 여기 내 프로젝트가 조직 된 방식입니다.

먼저 사용자가 응용 프로그램에 입장 할 때 나는 그가 교사인지 학생인지 선택하도록합니다.

사용자가 해당 모듈로 리디렉션되는 대상에 따라

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 답변

연결된 질문

관련된 질문

최근 질문