Une plongée approfondie dans les modules et le chargement paresseux dans Angular

Cet article vous présentera l'utilisation et le chargement paresseux des modules Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel angulaire"

1.

2. Module personnalisé angulaire

Lorsque notre projet est relativement petit Pas besoin de modules personnalisés. Mais lorsque notre projet est très volumineux, il n'est pas particulièrement approprié de monter tous les composants dans le module racine. Nous pouvons donc à ce moment personnaliser des modules pour organiser nos projets. Et le chargement paresseux des itinéraires peut être réalisé grâce aux modules personnalisés Angular.

ng g module mymodule

Créer un nouveau module utilisateur

ng g module module/user

Créer un nouveau composant racine sous le module utilisateur

ng g component module/user

Créer un nouveau composant adresse, commande, profil sous le module utilisateur

ng g component module/user/components/address
 ng g component module/user/components/order
 ng g component module/user/components/profile

Comment monter le module utilisateur dans le module racine ?

Lors du référencement du composant utilisateur dans le fichier modèle app.component.html du composant racine de l'application, une erreur sera signalée
Le traitement suivant est requis avant de pouvoir y accéder

1. Dans l'application .module.ts introduit des modules

2. Le module utilisateur expose les composants accessibles au monde extérieur

3 , introduisez

<app-user></app-user>

dans le modèle racine app.component.html Si vous devez utiliser le composant app-address directement dans le composant racine, vous en avez également besoin. pour exposer

/ dans le module utilisateur user.module.ts en premier L'exposition des composants permet à d'autres modules d'utiliser des composants exposés/
exports :[UserComponent,AddressComponent]

Comment monter le module produit dans le module racine ?

Identique à ci-dessus

Créer des services sous le module utilisateur

Créer
1.

ng g service module/user/services/common

2. Introduire les services dans le module utilisateur

user.module.ts

Configurer le routage pour implémenter le chargement paresseux du module

Créer un module :

ng g module module/user --routing
 ng g module module/article --routing
 ng g module module/product --routing

Créer un composant :

ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order

ng g component module/article
ng g component module/article/components/articlelist ng g component module/article/components/info

ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo

Ici, nous prenons l'article comme un exemple :

chargement paresseux de configuration angulaire

Le routage en angulaire peut charger à la fois des composants et des modules, et ce que nous appelons le chargement paresseux consiste en fait à charger des modules , il n'y a pas encore d'exemples de composants à chargement différé.
Pour charger un composant, utilisez le mot-clé composant
Pour charger un module, utilisez le mot-clé loadChildren

1 Créez un nouveau contenu app-routing.module.ts

dans. le dossier app Comme suit :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

forRoot est utilisé dans le module racine pour charger la configuration de routage,
et forChild est utilisé dans les sous-modules pour charger la configuration de routage.

Remarque : Vous devez importer le module AppRoutingModule dans le modèle racine app.module.ts

import { AppRoutingModule } from './app-routing.module';
...
imports: [
    AppRoutingModule,
]

2 Configurez le routage dans le sous-module

dans modulearticlearticle-routing. .module.ts Configurer le routage dans

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

    // import {ArticleComponent} from './article.component';
    const routes: Routes = [
    // {
    //     path:'',
    //     component:ArticleComponent
    // }
    ];

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

Vous pouvez également ajouter le module de routage lors de la création d'un nouveau projet, et vous pouvez omettre la configuration ci-dessus

dans article-routing.module de le module de l'article.ts configure le routage

.....

import {ArticleComponent} from './article.component';
const routes: Routes = [
  {
    path:'',
    component:ArticleComponent
  }
];

......

3. Configurez le routage dans le module de routage de l'application

const routes: Routes = [
  {
    path:'article',
    //写法一：
    loadChildren:'./module/article/article.module#ArticleModule'

    //写法二
    // loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)  
  },
  // {
  //   path:'user',loadChildren:'./module/user/user.module#UserModule'
  // },
  // {
  //   path:'product',loadChildren:'./module/product/product.module#ProductModule'
  // },
  {
    path:'**',redirectTo:'article'
  }
];

Si vous n'avez pas ajouté –routing lors de la création d'un nouveau module. avant, vous devez configurer le module Le routage du

module produit
Le routage du produit : moduleproductproduct-routing.module.ts

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

import {ProductComponent} from './product.component';
const routes: Routes = [
  {
    path:'',
    component:ProductComponent
  }
];

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

Le module de produit :
moduleproductproduct.module .ts

import { ProductRoutingModule } from './product-routing.module';

imports: [
    ProductRoutingModule
  ],

module utilisateur
routage utilisateur : moduleuseruser-routing.module.ts

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

import {UserComponent} from './user.component';
const routes: Routes = [
  {
    path:'',
    component:UserComponent
  }
];

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

module utilisateur : moduleuseruser.module.ts

import {UserRoutingModule} from './user-routing.module';  +

 imports: [
    UserRoutingModule   +
  ],

RouterModule.forRoot() et RouterModule.forChild()

L'objet RouterModule fournit deux méthodes statiques : forRoot() et forChild( ) pour configurer les informations de routage.

La méthode RouterModule.forRoot() est utilisée pour définir les informations de routage principales dans le module principal. RouterModule.forChild() est similaire à la méthode Router.forRoot(), mais elle ne peut être appliquée que dans les modules de fonctionnalités. .

C'est-à-dire que forRoot() est utilisé dans le module racine et forChild() est utilisé dans le sous-module.

配置子路由

1、在商品模块的路由product-routing.module.ts 配置子路由

import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';

const routes: Routes = [
  {
    path:'',
    component:ProductComponent,
    children:[
      {path:'cart',component:CartComponent},
      {path:'pcontent',component:PinfoComponent}
    ]
  },
  {path:'plist',component:PlistComponent}
];

2、在商品模块的模板product.component.html 添加router-outlet

<router-outlet></router-outlet>

3、在页面app.component.html添加菜单，方便跳转

<a [routerLink]="[&#39;/product&#39;]">商品模块</a><a [routerLink]="[&#39;/product/plist&#39;]">商品列表</a>

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!