Perbincangan ringkas tentang konfigurasi pramuat dan konfigurasi pemuatan malas dalam Angular-tutorial js-php.cn

Artikel ini akan membawa anda melalui konfigurasi penghalaan dalam Angular dan memperkenalkan secara ringkas konfigurasi pramuat dan konfigurasi pemuatan malas saya harap ia akan membantu anda.

Perbincangan ringkas tentang konfigurasi pramuat dan konfigurasi pemuatan malas dalam Angular

NgModul ialah teras modul Angular.

1. Peranan @NgModule:

Makna paling asas NgModule ialah membantu pembangun mengatur kod perniagaan boleh Adalah penting untuk menggunakan NgModule untuk menyusun komponen yang berkait rapat bersama-sama.
NgModule digunakan untuk mengawal sama ada komponen, arahan, paip, dsb. boleh digunakan Komponen dalam NgModule yang sama boleh dilihat antara satu sama lain secara lalai Untuk komponen luaran, hanya kandungan yang dieksport oleh NgModule . , iaitu, jika NgModule yang anda tentukan tidak mengeksport sebarang kandungan, maka pengguna luaran tidak akan dapat menggunakan sebarang kandungan yang ditakrifkan di dalamnya walaupun mereka mengimport modul anda.
NgModule ialah unit terkecil yang digunakan semasa pembungkusan Semua @NgModule dan konfigurasi penghalaan akan diperiksa semasa pembungkusan Lapisan bawah Angular dibungkus menggunakan webpack. Oleh kerana Angular telah mengkonfigurasi pek web untuk kami, ia lebih mudah untuk pembangun, jika tidak, mereka perlu mengkonfigurasi persekitaran itu sendiri.
NgModule ialah unit terkecil yang Router boleh muatkan secara tak segerak Unit terkecil yang Router boleh muatkan ialah modul, bukan komponen. Sudah tentu, ia dibenarkan untuk meletakkan hanya satu komponen dalam modul, dan banyak perpustakaan komponen melakukan ini. [Cadangan tutorial berkaitan: "tutorial sudut"]

2. Penerangan struktur @NgModul:

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

Salin selepas log masuk

3. Arahan pemuatan malas

(1) Objek RouterModule menyediakan dua kaedah statik: forRoot() dan forChild() untuk mengkonfigurasi maklumat penghalaan.

forRoot()//在主模块中定义主要的路由信息
forChild()``// digunakan dalam modul ciri (submodul)

(2) Malas memuatkan : loadChildren

Di sini modul yang sepadan tidak ditambahkan pada AppModule, tetapi atribut loadChildren digunakan untuk memberitahu penghalaan Angular untuk memuatkan modul yang sepadan berdasarkan laluan yang dikonfigurasikan dengan atribut loadChildren. Ini ialah aplikasi khusus fungsi pemuatan malas modul Apabila pengguna mengakses laluan /xxx/**, modul yang sepadan akan dimuatkan, yang mengurangkan saiz sumber yang dimuatkan apabila aplikasi dimulakan. Nilai atribut loadChildren terdiri daripada tiga bahagian:

Laluan relatif Modul yang perlu diimport
# pemisah
Nama modul yang dieksport kelas

(3) Pramuat

Apabila lazy loading digunakan, apabila laluan memuatkan modul buat kali pertama, kadangkala berlaku kelewatan dalam tindak balas . Pada masa ini, anda boleh menggunakan strategi pramuat untuk menyelesaikan masalah ini.

Angular menyediakan dua strategi pemuatan,

PreloadAllModules-pramuat
NoPreloading-tiada pramuat (lalai).

RouterModule.forRoo()'s 第二个参数 boleh menambah pilihan konfigurasi Salah satu pilihan konfigurasi ialah konfigurasi preloadingStrategy, iaitu konfigurasi dasar pramuat.

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

Salin selepas log masuk

Walau bagaimanapun, kami lebih suka mengawal pramuat modul sendiri Dalam kes ini, kami perlu menyesuaikan strategi pramuat

A 🎜>

Buat fail custom-preloading-strategy.ts baharu pada tahap yang sama seperti apl dibina

import { Route } from &#39;@angular/router&#39;;
import { PreloadingStrategy } from &#39;@angular/router&#39;;
import { Observable } from &#39;rxjs/Rx&#39;;

export class CustomPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
        return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
    }
}

Salin selepas log masuk

Suntikan

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { CustomPreloadingStrategy } from &#39;./preload&#39;;

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { preloadingStrategy:  CustomPreloadingStrategy })
  ],
  providers: [CustomPreloadingStrategy ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Salin selepas log masuk

B ke dalam penyedia apl .modules.ts , Pramuat modul yang ditentukan tersuai

Buat fail selective-preloading-strategy.ts pada tahap yang sama seperti aplikasi dibina (perlu disuntik ke dalam penyedia dalam app-routing.module. ts, dan kemudian ditakrifkan dalam laluan Data ditetapkan oleh parameter tambahan sama ada untuk pramuat)

import { Injectable } from &#39;@angular/core&#39;;
import { PreloadingStrategy, Route } from &#39;@angular/router&#39;;
import { Observable} from &#39;rxjs/Observable&#39;;
import &#39;rxjs/add/observable/of&#39;;
@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);
    }
  }
}

Salin selepas log masuk

app-routing.module.ts (fail ini menggabungkan pemuatan malas dengan pramuat)

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

Salin selepas log masuk

4. Langkah-langkah penciptaan sub-laluan (tidak dibuat mengikut arahan, manual secara langsung)

(1) Cipta folder utama baharu

Direktori utama

utama.komponen.html
utama.komponen.scss
utama .component.ts
main.module.ts
main-routing.module.ts
main.service.ts

Contohnya, dalam main.component.html di atas, terdapat kawasan untuk meletakkan subview ( Di bawah saya akan bercakap tentang idea dahulu, dan kemudian meletakkan kod utama, dan saya tidak akan pergi ke butiran.)

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

Salin selepas log masuk

(1). penghalaan di bawah folder utama dalam main-routing.module.ts, dan anda perlu merujuk setiap komponen (komponen yang perlu dikonfigurasikan dengan penghalaan)

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


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

Salin selepas log masuk

(2), main.service. ts biasanya digunakan untuk meletakkan permintaan http

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

Salin selepas log masuk

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

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

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

Salin selepas log masuk

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

Atas ialah kandungan terperinci Perbincangan ringkas tentang konfigurasi pramuat dan konfigurasi pemuatan malas dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!