您好,登錄后才能下訂單哦!
這篇文章主要介紹Angular中模塊和懶加載的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一、Angular 內(nèi)置模塊
二、Angular 自定義模塊
當(dāng)我們項(xiàng)目比較小的時(shí)候可以不用自定義模塊。但是當(dāng)我們項(xiàng)目非常龐大的時(shí)候把所有的組 件都掛載到根模塊里面不是特別合適。所以這個(gè)時(shí)候我們就可以自定義模塊來(lái)組織我們的項(xiàng) 目。并且通過(guò) Angular 自定義模塊可以實(shí)現(xiàn)路由的懶加載。
ng g module mymodule
新建一個(gè) user 模塊
ng g module module/user
新建一個(gè) user 模塊下的根組件
ng g component module/user
新建一個(gè) user 模塊下的 address,order,profile 組件
ng g component module/user/components/address ng g component module/user/components/order ng g component module/user/components/profile
如何在根模塊掛載 user 模塊呢?
在 app 根組件的模板文件 app.component.html 里 引用 user 組件會(huì)報(bào)錯(cuò)
需要如下處理才可以被訪問(wèn)
1、在 app.module.ts 引入模塊
2、user 模塊暴露出 要被外界訪問(wèn)到的組件
3、在根模板 app.component.html 里引入
<app-user></app-user>
如果需要在根組件里直接 使用 app-address 組件,也是需要先在 user 模塊 user.module.ts 暴露
/暴露組件 讓其他模塊里面可以使用暴露的組件/
exports:[UserComponent,AddressComponent]
如何在根模塊掛載 product 模塊呢?
同上
創(chuàng)建 user 模塊下的服務(wù)
1、創(chuàng)建
ng g service module/user/services/common
2、在 user 模塊引入服務(wù)
user.module.ts
配置路由實(shí)現(xiàn)模 塊懶加載
創(chuàng)建模塊:
ng g module module/user --routing ng g module module/article --routing ng g module module/product --routing
創(chuàng)建組件:
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
這里先以article為例講解:
angular配置懶加載
在angular中路由即能加載組件又能加載模塊,而我們說(shuō)的懶加載實(shí)際上就是加載模塊,目前還沒(méi)有看到懶加載組件的例子。
加載組件使用的是component關(guān)鍵字
加載模塊則是使用loadChildren關(guān)鍵字
1. 在app文件夾下 新建 app-routing.module.ts
內(nèi)容如下:
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
forRoot是用在根模塊加載路由配置,
而forChild是用在子模塊加載路由配置。
注意:需要在根模板 app.module.ts里導(dǎo)入AppRoutingModule模塊
import { AppRoutingModule } from './app-routing.module'; ... imports: [ AppRoutingModule, ]
2. 在子模塊里配置路由
在\module\article\article-routing.module.ts里配置路由
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 { }
也可以在新建項(xiàng)目的時(shí)候 就把路由的模塊加上,可以省去上面的 配置
在 article模塊的 article-routing.module.ts配置路由
..... import {ArticleComponent} from './article.component'; const routes: Routes = [ { path:'', component:ArticleComponent } ]; ......
3. 在app的路由模塊進(jìn)行配置路由
const routes: Routes = [ { path:'article', //寫(xiě)法一: loadChildren:'./module/article/article.module#ArticleModule' //寫(xiě)法二 // 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' } ];
如果在之前新建模塊的時(shí)候沒(méi)有加上–routing,,需要配置模塊的路由
product模塊
product的路由:module\product\product-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 { }
product的模塊:
module\product\product.module.ts
import { ProductRoutingModule } from './product-routing.module'; imports: [ ProductRoutingModule ],
user模塊
user的路由: \module\user\user-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 { }
user的模塊: \module\user\user.module.ts
import {UserRoutingModule} from './user-routing.module'; + imports: [ UserRoutingModule + ],
RouterModule.forRoot() 和 RouterModule.forChild()
RouterModule對(duì)象為提供了兩個(gè)靜態(tài)的方法:forRoot()和forChild()來(lái)配置路由信息。
RouterModule.forRoot()方法用于在主模塊中定義主要的路由信息,RouterModule.forChild()與 Router.forRoot()方法類(lèi)似,但它只能應(yīng)用在特性模塊中。
即根模塊中使用forRoot(),子模塊中使用forChild()。
配置子路由
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、在頁(yè)面app.component.html添加菜單,方便跳轉(zhuǎn)
<a [routerLink]="['/product']">商品模塊</a><a [routerLink]="['/product/plist']">商品列表</a>
以上是“Angular中模塊和懶加載的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。