web-dev-qa-db-fra.com

Angular: utilisation des méthodes forRoot/forChild?

J'ai été surpris qu'il n'y ait pas de réponse exacte à la question:

A quoi servent les méthodes forRoot / forChild ?

Par exemple, dans RouterModule:

Router.forRoot(routes)
angularangular-ngmodel
6
Stepan Suvorov

forRoot ()

Crée un module avec tous les fournisseurs de routeur et directives. Il configure également éventuellement un écouteur d'application sur effectuer une navigation initiale.

forChild () 

Crée un module avec toutes les directives du routeur et un fournisseur enregistrant des itinéraires.

Utilisez la convention forRoot/forChild uniquement pour les modules partagés avec des fournisseurs qui vont être importés dans des modules de modules vifs et différés.

Éviter les confusions courantes avec les modules dans Angular

celui-ci est une réponse géniale Quel est le but d'utiliser forRoot dans NgModule? peut donner des informations supplémentaires sur ce sujet 

2
malbarmawi

Notes d'utilisation

RouterModule peut être importé plusieurs fois: une fois par paquet chargé. Etant donné que le routeur traite d’un emplacement global de ressources partagées, nous ne pouvons pas avoir plus d’un service de routeur actif.

C'est pourquoi il y a deux façons de créer le module: 

1. RouterModule.forRoot - forRoot crée un module contenant toutes les directives, les itinéraires donnés et le service de routeur lui-même.

2. RouterModule.forChild - forChild crée un module contenant toutes les directives et les itinéraires donnés, mais n'inclut pas le service de routeur.

1
James Delaney

RouterModule # forRoot

Crée un module avec tous les fournisseurs de routeur et les directives. Ça aussi configure facultativement un écouteur d'application pour effectuer un .__ initial. la navigation.

While RouterModule # forChild

Crée un module avec toutes les directives du routeur et un fournisseur enregistrement des itinéraires.

Le premier est généralement utilisé pour créer la configuration initiale de l'application Angular et enregistrer les routes "de base", tandis que le second est généralement utilisé pour configurer des routes "relatives".

Disons que nous avons une application avec des itinéraires pour:

  1. Utilisateur
    • Registre
    • Liste
    • Effacer
  2. Entreprise
    • Registre
    • Liste
    • Effacer

Vous pouvez utiliser les méthodes mentionnées comme ceci:

app-routing.module.ts (Ceci est une "vraie" application, les itinéraires diffèrent)

Où les routes de base user/ et company/ sont enregistrées en utilisant RouterModule#forRoot

//...
const  routes: Routes = [
  {
    path: 'user', loadChildren: './user/user.module#userModule'
  },
  { path: 'company', loadChildren: './company/company.module#CompanyModule'},
  { path: '**', loadChildren: './page-not-found/page-not-found.module#PageNotFoundModule'}
];

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

user-routing.module.ts (Ceci est une "vraie" application, les itinéraires diffèrent)

Et les routes relatives à user/ et company/ sont enregistrées en utilisant RouterModule#forChild

//...
const routes: Routes = [
  { path: 'list', component: UserComponent},
  { path: 'delete/:id', component: UserDeleteComponent},
  { path: 'register/:id', component: UserRegisterComponent},
];

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

//...

Et il en irait de même pour les itinéraires pour enfants de la société.

1
lealceldeiro