Angular 中自定義模塊

一、Angular   內置模塊

 

 

 

 

 二、Angular 自定義模塊

當我們項目比較小的時候可以不用自定義模塊。但是當我們項目非常龐大的時候把所有的組

件都掛載到根模塊里面不是特別合適。

 

所以這個時候我們就可以自定義模塊來組織我們的項目。並且通過 Angular 自定義模塊可以實現路由的懶加載。

 

 

例如，創建商品模塊：

ng g module module/product:

product.module.ts

創建模塊的根組件：product組件

ng g component module/product

 

 創建其他組件：

ng g component module/product/components/plist

ng g component module/product/components/cart

ng g component module/product/components/pinfo

 

在product.t里面操作：

 把product.ts的根組件暴露出去

exports:[ProductComponent]//暴露組件，讓其他模塊里面可以使用暴露的組件

 

 

 在根模塊app.module.ts掛載根模塊

在app.module.ts里面引用自定義模塊

 

 之后可以在根組件.html調用商品模塊

自定義模塊以及配置路由模塊懶加載

 

 配置模塊里面的路由：

 

 

ng g module module/product:

產生：product.module.ts

 

 

 

ng g module module/product --routing

該命令是：創建模塊的同時，創建路由

 

 

創建模塊的根組件：product組件

ng g component module/product

 

如何實現模塊的懶加載

懶加載提升應用性能

cd 到指定項目下

新建：ng new angularlayload 

cd 到項目名下：

 

安裝依賴：npm install

運行項目：ng serve

新建模塊：

如下代碼在創建模塊時一起創建路由

ng g module module/user --routing

 

 

 

 

ng g module module/article --routing

ng g module module/product --routing

 

 然后分別創建：article/product/user的組件

ng g component module/user

ng g component module/article

ng g component module/product

 

 

 

 

以user模塊為例：

在user-routing里面 引入user.module.ts

import { UserComponent } from './user.component';

配置路由：

const routes: Routes = [

  {path:'',component:UserComponent}
  
];

 

同理配置product和article

 

在根app.component.html掛載模塊

<header>
<a [routerLink]="['/user']" >用戶模塊</a>
<a [routerLink]="['/product']" >商品模塊</a>
<a [routerLink]="['/article']" >商品詳情</a>

</header>

顯示：

 

 需要動態加載，所以要：

在app-routing.module.ts-懶加載

const routes: Routes = [

{
// path: 'user',loadChildren:'./module/user/user.module#UserModule'
path:'user',
loadChildren: () => import('./module/user/user.module').then(mod => mod.UserModule)

},

{
  path:'article',
  loadChildren: () => import('./module/article/article.module').then(mod => mod.ArticleModule)
  // loadChildren: './module/article/article.module#ArticleModule',
  },

  {
    // path: 'product',loadChildren:'./module/product/product.module#ProductModule'

    path:'product',
    loadChildren: () => import('./module/product/product.module').then(mod => mod.ProductModule)

  },

    {
      path: '**',redirectTo:'user'
    }

];

 

 在user新建組件：

ng g component module/user/components/profile

ng g component module/user/components/address

在user.module.ts中復制

import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';

到user-routing.module.ts中

//引入模塊
import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';


//引入路由
const routes: Routes = [

  {path:'',component:UserComponent},

  {path:'profile',component:ProfileComponent},
  {path:'address',component:AddressComponent},



];

 

 自定義模塊里面配置路由

 創建其他組件：

ng g component module/product/components/plist

ng g component module/product/components/cart

ng g component module/product/components/pinfo

 

 

為product配置路由：

在product-routing.module.ts引入product.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:'pinfo',component:PinfoComponent},
]
},

  {path:'plist',component:PlistComponent},

];

 

 定義cart和pinfo為product的子路由

 

訪問cart不會出現cart頁面，依舊是product頁面

 

 

 如果要顯示子路由的頁面

需要在父路由product.html配置

<router-outlet></router-outlet>

這樣訪問就可以顯示