Ein tiefer Einblick in Module und Lazy Loading in Angular-js-Tutorial-php.cn

Ein tiefer Einblick in Module und Lazy Loading in Angular

青灯夜游

Freigeben： 2021-03-03 10:00:42

nach vorne

1658 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Verwendung von Angular-Modulen und Lazy Loading vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ein tiefer Einblick in Module und Lazy Loading in Angular

Verwandte Empfehlungen: „Angular Tutorial“

1. Angular integriertes Modul

Ein tiefer Einblick in Module und Lazy Loading in Angular

2. Angular benutzerdefiniertes Modul.

Wenn unser Projekt relativ klein ist Es sind keine benutzerdefinierten Module erforderlich. Wenn unser Projekt jedoch sehr groß ist, ist es nicht besonders sinnvoll, alle Komponenten im Root-Modul zu montieren. Zu diesem Zeitpunkt können wir also Module anpassen, um unsere Projekte zu organisieren. Und das verzögerte Laden von Routen kann durch benutzerdefinierte Angular-Module erreicht werden.

ng module mymodule

Ein tiefer Einblick in Module und Lazy Loading in Angular

Erstellen Sie ein neues Benutzermodul

ng g module module/user

Nach dem Login kopieren

Erstellen Sie eine neue Stammkomponente unter dem Benutzermodul

ng g component module/user

Nach dem Login kopieren

Erstellen Sie eine neue Adress-, Bestell- und Profilkomponente unter dem Benutzermodul

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

Nach dem Login kopieren

How to Was ist mit der Montage des Benutzermoduls im Root-Modul?

Wenn Sie auf die Benutzerkomponente in der Vorlagendatei app.component.html der App-Stammkomponente verweisen, wird ein Fehler gemeldet.
Die folgende Verarbeitung ist erforderlich, bevor darauf zugegriffen werden kann. 1. Führen Sie das Modul in app.module ein. ts

Ein tiefer Einblick in Module und Lazy Loading in Angular 2. Das Modul stellt Komponenten bereit, auf die die Außenwelt zugreifen kann

Ein tiefer Einblick in Module und Lazy Loading in Angular 3. Fügen Sie

<app-user></app-user>

Nach dem Login kopieren

in die Stammvorlage app.component.html ein Komponente direkt in der Stammkomponente, müssen Sie sie auch zuerst zum Benutzermodul hinzufügen. Benutzer .module.ts stellt bereit

Wie montiere ich das Produktmodul im Root-Modul? + Lazy Loading

Modul erstellen:

ng g service module/user/services/common

Nach dem Login kopieren

Komponente erstellen:

user.module.ts

Nach dem Login kopieren

Hier nehmen wir den Artikel als Beispiel:

Angular Configuration Lazy Loading

Routing im Winkel kann beides laden Komponenten und laden sie Module, und was wir Lazy Loading nennen, bedeutet eigentlich das Laden von Modulen. Es gibt noch keine Beispiele für Lazy Loading-Komponenten.

Um Komponenten zu laden, verwenden Sie das Schlüsselwort „component“.
Um Module zu laden, verwenden Sie das Schlüsselwort „loadChildren“.

1 Erstellen Sie eine neue app-routing.module.ts im App-Ordner.

Der Inhalt lautet wie folgt:

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

Nach dem Login kopieren

Ein tiefer Einblick in Module und Lazy Loading in Angular

forRoot wird verwendet um die Routing-Konfiguration des Root-Moduls zu laden,

und forChild wird in Submodulen zum Laden der Routing-Konfiguration verwendet.

Hinweis: Sie müssen das AppRoutingModule-Modul in die Stammvorlage app.module.ts

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

Nach dem Login kopieren

2 importieren. Konfigurieren Sie das Routing im Untermodul Erstellen Sie ein neues Projekt. Wenn Sie das Routing-Modul hinzufügen, können Sie die obige Konfiguration speichern.

Routing im Artikel-Routing.module.ts des Artikelmoduls konfigurieren Ein tiefer Einblick in Module und Lazy Loading in Angular

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

Nach dem Login kopieren

3. Routing im Routing-Modul der App konfigurieren

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

Nach dem Login kopieren

Wenn beim Erstellen eines neuen Moduls zuvor kein Routing hinzugefügt wurde, müssen Sie das Routing des Moduls konfigurieren:

Produktmodul

Produktrouting: moduleproductproduct-routing.module.ts

    import { NgModule } from &#39;@angular/core&#39;;
    import { Routes, RouterModule } from &#39;@angular/router&#39;;

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

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

Nach dem Login kopieren

Produktmodul: moduleproductproduct. module.ts

.....

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

......

Nach dem Login kopieren

Benutzermodul

Benutzerrouting: moduleuseruser-routing.module.ts

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

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

Nach dem Login kopieren

Benutzermodul: moduleuseruser.module.ts

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

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

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

Nach dem Login kopieren

RouterModule.forRoot() und RouterModule.forChild()

RouterModule Das Objekt stellt zwei statische Methoden bereit: forRoot() und forChild() zum Konfigurieren von Routing-Informationen.

Die Methode RouterModule.forRoot() wird zum Definieren von Hauptroutinginformationen im Hauptmodul verwendet. RouterModule.forChild() ähnelt der Methode Router.forRoot(), kann jedoch nur in Funktionsmodulen angewendet werden.

Das heißt, verwenden Sie forRoot() im Root-Modul und forChild() im Submodul.

配置子路由

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

import { PlistComponent } from &#39;./components/plist/plist.component&#39;;
import { CartComponent } from &#39;./components/cart/cart.component&#39;;
import { PinfoComponent } from &#39;./components/pinfo/pinfo.component&#39;;

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

Nach dem Login kopieren

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

<router-outlet></router-outlet>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in Module und Lazy Loading in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!