web-dev-qa-db-fra.com

Routage entre modules en Angular

Je construis une application simple angular. Il y a deux modules en tant qu'étudiant et professeur . Voici comment s'est organisé mon projet.

Project structure

Tout d'abord, lorsque l'utilisateur entre dans l'application, je le laisse choisir s'il est enseignant ou étudiant.

En fonction de ce que l'utilisateur sera redirigé vers le module correspondant.

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 {


  }

Voici mon app.routing.ts fichier.

Mon problème nous quand je redirigé vers le module, je veux router entre les composants de ces modules. Dois-je ajouter un autre <router-outlet> dans chaque module ou puis-je le faire avec le seul <router-outlet> dans AppModule.

Si je devais ajouter un autre <router-outlet> comment dois-je écrire ma classe de routeur pour ces modules.

angularangular-routingng-modules
8
hackerbuddy

Manière de chargement paresseux 

// 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{
}

Manière de chargement non paresseuse

Importez simplement le YourModule dans le module principal et cela fonctionnera si les routes ne sont pas chargées paresseusement.

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

Prenez le temps de lire la documentation de la déroute https://angular.io/guide/router

Vérifiez cette réponse https://stackoverflow.com/a/39284277/6786941

2
Amr Ibrahim

Oui, vous devez définir le routage pour les modules individuels et dans le fichier de composants de module, vous devez fournir

Ci-dessous devrait être la structure du fichier

- 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

Identique à un autre module pour les étudiants.

L'étape suivante consiste à spécifier les itinéraires internes du module enseignant. ci-dessous sont le contenu probable de

teacher-routing.module.ts

Voici les exemples d'itinéraires pour le module enseignant

 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{}
1
Parth Lukhi