場景

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内置模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。