Angular 中自定义模块

欧阳静宜 發表於 2020-5-26 19:44:00

<img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526185647460-863241757.png" alt="">
<h3>一、Angular   内置模块</h3>
 
 <img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526185748964-1359628264.png" alt="">
 
 
<h3> 二、Angular 自定义模块</h3>
当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组
 件都挂载到根模块里面不是特别合适。
 
所以这个时候我们就可以自定义模块来组织我们的项目。并且通过 Angular 自定义模块可以实现路由的懒加载。
 
 
例如，创建商品模块：
ng g module module/product:
product.module.ts
创建模块的根组件：product组件
ng g component module/product
<img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526193043927-505909500.png" alt="">
 
 创建其他组件：
ng g component module/product/components/plist
ng g component module/product/components/cart
ng g component module/product/components/pinfo
<img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526193545597-30645263.png" alt="">
 
在product.t里面操作：
 把product.ts的根组件暴露出去
exports://暴露组件，让其他模块里面可以使用暴露的组件
 
<img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526193955070-1386714771.png" alt="">
 
 在根模块app.module.ts挂载根模块
在app.module.ts里面引用自定义模块
<img src="https://img2020.cnblogs.com/blog/1447456/202005/1447456-20200526194212532-751125760.png" alt="">
 
 之后可以在根组件.html调用商品模块
<h3>自定义模块以及配置路由模块懒加载</h3>
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601094633711-511342195.png" alt="">
 
 配置模块里面的路由：
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601094808064-1949306273.png" alt="">
 
 
ng g module module/product:
产生：product.module.ts
 
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601095058234-1766475253.png" alt="">
 
 
ng g module module/product --routing
该命令是：创建模块的同时，创建路由
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601095114430-472745879.png" alt="">
 
 
创建模块的根组件：product组件
ng g component module/product
 
<h3>如何实现模块的懒加载</h3>
懒加载提升应用性能
cd 到指定项目下
新建：ng new angularlayload 
cd 到项目名下：
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601112330168-1742917636.png" alt="">
 
安装依赖：npm install
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601113254267-1264013406.png" alt="">
运行项目：ng serve
<h3>新建模块：</h3>
如下代码在创建模块时一起创建路由
ng g module module/user --routing
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601113845538-725208834.png" alt="">
 
 <img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601113908595-1842976590.png" alt="">
 
 
ng g module module/article --routing
ng g module module/product --routing
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601114129005-438575490.png" alt="">
 
 然后分别创建：article/product/user的组件
ng g component module/user
ng g component module/article
ng g component module/product
 <img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601115502577-1560085244.png" alt="">
 <img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601141131650-1416527331.png" alt="">
 
 
以user模块为例：
在user-routing里面引入user.module.ts
<div class="cnblogs_code">
<pre>import { UserComponent } from './user.component';</pre>
</div>
配置路由：
<div class="cnblogs_code">
<pre>const routes: Routes = [

{path:'',component:UserComponent}

];</pre>
</div>
 
同理配置product和article
 
在根app.component.html挂载模块
<div class="cnblogs_code">
<pre><header>
<a ="['/user']" >用户模块</a>
<a ="['/product']" >商品模块</a>
<a ="['/article']" >商品详情</a>

</header></pre>
</div>
显示：
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601145126745-665688103.png" alt="">
 
 需要动态加载，所以要：
<h3>在app-routing.module.ts-懒加载</h3>
<div class="cnblogs_code">
<pre>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'
}

];</pre>
</div>
 
 在user新建组件：
ng g component module/user/components/profile
ng g component module/user/components/address
在user.module.ts中复制
<div class="cnblogs_code">
<pre>import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';</pre>
</div>
到user-routing.module.ts中
<div class="cnblogs_code">
<pre>//引入模块 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},

];</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601171802159-278691734.png" alt="">
 
 自定义模块里面配置路由
 创建其他组件：
ng g component module/product/components/plist
ng g component module/product/components/cart
ng g component module/product/components/pinfo
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601172122646-906560146.png" alt="">
 
 
为product配置路由：
在product-routing.module.ts引入product.module.ts中生成的组件模块：
<div class="cnblogs_code">
<pre>import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601172526099-1837346020.png" alt="">
 
 
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601172633057-923063271.png" alt="">
 
 
 
<h3>父子路由定义区别</h3>
<div class="cnblogs_code"><img id="code_img_closed_bc7e584f-11d6-4d10-a88a-7333b90e1d83" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_bc7e584f-11d6-4d10-a88a-7333b90e1d83" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_bc7e584f-11d6-4d10-a88a-7333b90e1d83" class="cnblogs_code_hide">
<pre>const routes: Routes = [
{path:'',component:ProductComponent,

children:[
{path:'cart',component: CartComponent},
{path:'pinfo',component:PinfoComponent},
]
},

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

];</pre>
</div>
View Code</div>
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601173435571-818842820.png" alt="">
 
 定义cart和pinfo为product的子路由
 
访问cart不会出现cart页面，依旧是product页面
 
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601173606582-2049739319.png" alt="">
 
 如果要显示子路由的页面
需要在父路由product.html配置
<div class="cnblogs_code">
<pre><router-outlet></router-outlet> 这样访问就可以显示</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1447456/202006/1447456-20200601173947945-520851015.png" alt="">
 

</div>
<div id="MySignature" role="contentinfo">
悟已往之不谏，知来者之可追。 
来源：https://www.cnblogs.com/foremostxl/p/12968256.html

頁: [1]

琼殿技术论坛's Archiver

Angular 中自定义模块