Ionic中自定义公共模块以及在自定义模块中使用ionic内置模块

冷不防 2023-10-06 09:52 24阅读 0赞

## 场景 ##

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/106308166][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_article_details_106366142]

实现页面的跳转后。

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

注：

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

## 实现 ##

新建公共模块以及组件

ionic g module module/list

ionic g component module/list

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

公共模块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 { }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

这里在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 {}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

使用自定义模块

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

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

<app-list></app-list>

#### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][] ####

#### 效果 ####

![20200526223958281.gif][]

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

Ionic的内置模块

[http://www.ionic.wang/components\_doc-index.html][http_www.ionic.wang_components_doc-index.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

只需要在自定义公共模块这里是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 { }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

然后就可以在自定义模块这里是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>

#### 效果 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106308166]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106366142]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106366142
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526223904210.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200526223917887.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200526223933964.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200526223952204.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20200526223958281.gif]: https://img-blog.csdnimg.cn/20200526223958281.gif
[http_www.ionic.wang_components_doc-index.html]: http://www.ionic.wang/components_doc-index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200526224006221.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200526224019474.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200526224030548.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70