Une brève discussion sur la configuration de préchargement et la configuration de chargement paresseux dans Angular

Cet article vous amènera à comprendre la configuration du routage dans Angular et à présenter brièvement la configuration de préchargement et la configuration de chargement paresseux. J'espère que cela vous sera utile !

NgModule est le cœur du module Angular Parlons-en d'abord.

1. Le rôle de @NgModule :

• La signification la plus fondamentale de NgModule est d'aider les développeurs à organiser le code métier. Les développeurs peuvent utiliser NgModule pour organiser ensemble des composants étroitement liés, ce qui est la première priorité.
• NgModule est utilisé pour contrôler si les composants, instructions, tuyaux, etc. peuvent être utilisés. Les composants d'un même NgModule sont visibles les uns par les autres, tandis que pour les composants externes, seul le contenu exporté par NgModule peut être vu, c'est-à-dire. pour dire, si le NgModule que vous définissez n'exporte aucun contenu, les utilisateurs externes ne pourront utiliser aucun contenu qui y est défini même s'ils importent votre module.
• NgModule est la plus petite unité utilisée lors de l'empaquetage. Lors de l'empaquetage, toutes les configurations @NgModule et de routage seront vérifiées. La couche inférieure d'Angular est empaquetée à l'aide de webpack. Comme Angular a déjà configuré le webpack pour nous, c'est beaucoup plus facile pour les développeurs, sinon ils doivent configurer eux-mêmes l'environnement.
• NgModule est la plus petite unité que le routeur peut charger de manière asynchrone. La plus petite unité que le routeur peut charger est un module, pas un composant. Bien entendu, il est permis de placer un seul composant dans un module, et de nombreuses bibliothèques de composants le font. [Recommandations de didacticiel associées : "tutoriel angulaire"]

2. Description de la structure @NgModule :

@NgModule({ 
　　declarations: [], //属于当前模块的组件、指令及管道
　　imports: [], //当前模板所依赖的项，即外部模块（包括httpModule、路由等）
　　export:[],//声明出应用给其他的module使用
　　providers: [], //注入服务到当前模块
　　bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性)
})

3. Description du chargement paresseux

(1) RouterModule L'objet code> fournit deux méthodes statiques : <code>forRoot() et forChild() pour configurer les informations de routage. RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

• forRoot()//在主模块中定义主要的路由信息
• forChild()``//应用在特性模块（子模块）中

（2）懒加载：loadChildren

此处并没有将对应的模块加入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。 loadChildren的属性值由三部分组成：

• 需要导入Module的相对路径
• #分隔符
• 导出模块类的名称

（3）预加载

在使用懒加载的情况下，路由第一次加载某个模块时，有时反应有延迟。这时就可以用预加载策略来解决这个问题。

Angular提供了两种加载策略，

• PreloadAllModules-预加载
• NoPreloading-没有预加载（默认）。

RouterModule.forRoo()的第二个参数可以添加配置选项，配置选项中就有一个是preloadingStrategy

forRoot()//Définir les principales informations de routage dans le module principal

forChild()``//Appliquer dans le module de fonctionnalités (sous-module)

(2) Chargement paresseux : loadChildren

Le module correspondant n'est pas ajouté à l'AppModule ici, mais l'attribut loadChildren est utilisé pour indiquer à Angular d'acheminer en fonction de loadChildren code Le chemin configuré par l'attribut code> permet de charger le module correspondant. Il s'agit de l'application spécifique de la fonction de chargement différé du module Lorsque l'utilisateur accède au chemin /xxx/**, le module correspondant sera chargé, ce qui réduit la taille des ressources chargées au démarrage de l'application. La valeur de l'attribut loadChildren se compose de trois parties :

Le chemin relatif du module importé

# séparateur Le nom de la classe du module exporté

(3) Préchargement

Dans le cas d'un chargement paresseux , Lorsque le routage charge un module pour la première fois, il y a parfois un retard dans la réponse. À ce stade, vous pouvez utiliser la stratégie de préchargement pour résoudre ce problème.

• Angular propose deux stratégies de chargement,

• PreloadAllModules-préchargement
  NoPreloading-pas de préchargement (par défaut).

• Le deuxième paramètre de RouterModule.forRoo() peut ajouter des options de configuration. L'une des options de configuration est la configuration preloadingStrategy. est une configuration de stratégie préchargée.

  //使用默认预加载-预加载全部模块
  import { NgModule } from '@angular/core'; 
  import { AppComponent } from './app.component'; 
  import { routes } from './main.routing'; 
  import { RouterModule } from '@angular/router'; 
  import { PreloadAllModules } from '@angular/router'; 
  @NgModule({ 
  　　declarations: [AppComponent], 
  　　imports: [ BrowserModule, RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], 
  　　providers: [], 
  　　bootstrap: [AppComponent] }) 
  export class AppModule { }

Cependant, nous préférons contrôler nous-mêmes le préchargement des modules. Dans ce cas, nous devons personnaliser la stratégie de préchargement

• A Chargement personnalisé de tous les modules après 5 secondes

Créez une nouvelle personnalisation au même niveau que le. Fichier app -preloading-strategy.ts

• import { Route } from '@angular/router';
  import { PreloadingStrategy } from '@angular/router';
  import { Observable } from 'rxjs/Rx';
  
  export class CustomPreloadingStrategy implements PreloadingStrategy {
      preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
          return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
      }
  }

  Injecter

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { routes } from './main.routing';
  import { RouterModule } from '@angular/router';
  import { CustomPreloadingStrategy } from './preload';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes, { preloadingStrategy:  CustomPreloadingStrategy })
    ],
    providers: [CustomPreloadingStrategy ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

dans les fournisseurs de app.modules.ts B. Personnaliser - spécifier le préchargement du module

• Créer un nouveau fichier select-preloading-strategy.ts au même niveau que le l'application est construite (vous devez injecter les fournisseurs dans app-routing.module.ts, puis utiliser des paramètres supplémentaires pour définir s'il faut précharger les données définies dans la route)

  import { Injectable } from '@angular/core';
  import { PreloadingStrategy, Route } from '@angular/router';
  import { Observable} from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  @Injectable()
  export class SelectivePreloadingStrategy implements PreloadingStrategy {
    preloadedModules: string[] = [];
  
    preload(route: Route, load: () => Observable<any>): Observable<any> {
      if (route.data && route.data[&#39;preload&#39;]) {
        return load();
      } else {
        return Observable.of(null);
      }
    }
  }

  app-routing.module.ts (Chargement paresseux de ce fichier est similaire au préchargement combiné)

  • import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { CanDeactivateGuard } from './guard/can-deactivate-guard.service';
    import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; // 预加载
    import { PageNotFoundComponent } from './not-found.component';
    const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'mian', loadChildren: './main/mian.module#MainModule' }, // 懒加载(在这个层级的router配置文件及module文件都不需要引入该组建)
    { path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懒加载 + 预加载
    { path: '**', component: PageNotFoundComponent } // 注意要放到最后
    ];
    @NgModule({
    　　imports: [
    　　　　RouterModule.forRoot(appRoutes,{
    　　　　　　enableTracing: true, // <-- debugging purposes only
    　　　　　　preloadingStrategy: SelectivePreloadingStrategy // 预加载
    　　　　})
    　　],
    　　exports: [
    　　　　RouterModule
    　　],
    　　providers: [
    　　　　CanDeactivateGuard,
    　　　　SelectivePreloadingStrategy
    　　]
    })
    export class AppRoutingModule { }

  4. Étapes de création de sous-route (aucune instruction pour créer, directement manuel)
  • • (1) Créer un nouveau dossier principal
  répertoire principal
  • • main .component.html
  • main.component.scss
  main.component.ts
  • main.module.ts
  main-routing.module.ts
  • • main .service. ts
  • Répertoire A
  A.component.html

A.component.scss

🎜🎜A.component.ts🎜 🎜🎜🎜Annuaire B🎜🎜🎜 🎜B .component.html🎜🎜🎜🎜 🎜🎜B.component.scss🎜🎜🎜🎜🎜🎜B.component.ts🎜🎜🎜🎜🎜🎜🎜Par exemple, dans main.component.html ci-dessus , il y a une zone pour placer des sous-vues (je vais d'abord parler des idées), puis mettre le code clé, et je n'entrerai pas dans les détails du reste)🎜

<div>下面的区域是另一个路由出口</div>
<router-outlet></router-outlet><!--此处依照下面的路由配置，默认显示AComponent组件的内容-->

🎜(1) Configurez le routage sous le dossier main dans main-routing. .module.ts. Vous devez référencer les composants de chaque composant (les composants qui doivent être configurés pour le routage)🎜

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {MainComponent} from './main.component';
import{AComponent} from './A/A.component';
import{BComponent} from './B/B.component';
const mainRoute: Routes = [
  {
    path: '',
    component: MainComponent,
    data: {
      title: '面试预约',
    },
    children: [
      {
        path: '',//path为空表示默认路由
        component: AComponent,
        data: {
          title: '大活动',
        }
      },
      {
        path: 'activity',
        component: BComponent,
        data: {
          title: '中活动',
        }
      }
    ]
  }
];


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

🎜 (2), main.service.ts est généralement utilisé pour placer des requêtes http🎜

import { AppService } from './../../app.service';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpParams } from '@angular/common/http';
import { PageData, ActivitysManage } from './model/activitys-manage';
import { BehaviorSubject } from 'rxjs';
import {PageDataBig, ActivitySmall, PageDataSmall } from './model/activitys-manage';
@Injectable()
export class MainService {
  
}

main文件夹下的组件如要调用MainService,需要在组件的ts文件引入MainService

（3）、在main.module.ts中引入各组件（包括自身、路由配置文件所用到的所有组件以及路由的module）

import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MainComponent } from './interview-appointment.component';
import { AComponent } from './A/A.component';
import { BComponent } from './B/B.component';
import { NgModule } from '@angular/core';
import { CoreFrameCommonModule } from '../../common/common.module';
import { MainRoutingModule } from './main-routing.module';
import { NgZorroAntdModule } from '../../zorro/ng-zorro-antd.module';
import { MainService } from './interview-appointment.service';
@NgModule({
  imports: [FormsModule,CoreFrameCommonModule, CommonModule, MainRoutingModule,NgZorroAntdModule],
  exports: [],
  declarations: [MainComponent,AComponent,BComponent],
  providers: [MainService],
})
export class MainModule{ }

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

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!