场景

Ionic介绍以及搭建环境、新建和运行项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166

在上面搭建起Ionic项目后 。

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106366142

实现页面的跳转后。

怎样把公共的功能抽离出来成为一个模块，然后在其他模块中引入这个公共的模块？

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建公共模块以及组件

ionic g module module/list ionic g component module/list

 

公共模块list.module.ts中暴露对应的组件

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ListComponent } from './list.component';@NgModule({declarations: [],imports: [CommonModule],exports:[ListComponent] }) export class ListModule { }

 

用到的地方引入自定义模块，并依赖注入自定义模块

这里在tab2.module.ts中引入

import { IonicModule } from '@ionic/angular'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Tab2Page } from './tab2.page'; import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';import { Tab2PageRoutingModule } from './tab2-routing.module'; import { ListModule } from '../module/list/list.module'; @NgModule({imports: [IonicModule,CommonModule,FormsModule,ExploreContainerComponentModule,Tab2PageRoutingModule,ListModule],declarations: [Tab2Page] }) export class Tab2PageModule {}

 

使用自定义模块

为了能更好辨别是使用的公共模块在公共模块list.component.html中修改为

<ul><li>霸道</li><li>流氓</li><li>气质</li> </ul>

然后在tab2.page.html中使用公共模块

<app-list></app-list>

 

效果

 

Ionic自定义模块中使用内置模块

Ionic的内置模块

http://www.ionic.wang/components_doc-index.html

 

只需要在自定义公共模块这里是list.module.ts中引入并声明Ionic内置模块

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ListComponent } from './list.component'; import { IonicModule } from '@ionic/angular';@NgModule({declarations: [],imports: [CommonModule,IonicModule],exports:[ListComponent] }) export class ListModule { }

 

然后就可以在自定义模块这里是list.component.html中使用ionic的内置模块了

<ion-list><ion-item><ion-label>公众号：</ion-label></ion-item><ion-item><ion-label>霸道的程序猿</ion-label></ion-item><ion-item><ion-label>The Legend of Zeldaion-label></ion-label></ion-item><ion-item><ion-label>Pac-Manion-label></ion-label></ion-item><ion-item><ion-label>Super Mario Worldion-label></ion-label></ion-item> </ion-list>

效果

 

总结

以上是生活随笔为你收集整理的Ionic中自定义公共模块以及在自定义模块中使用ionic内置模块的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。