Ionic 模块组件的理解

news2024/11/29 10:33:57

1 Ionic4.x 文件分析

在这里插入图片描述

1.1 app.module.ts 分析

在这里插入图片描述

Ionic 是一个基于 Angular 的移动应用开发框架，能帮助开发者使用 Web 技术（HTML5、CSS3、JavaScript）创建跨平台的应用程序。在 Ionic 应用程序中，app.module.ts 文件是整个应用程序的入口点，它定义了应用程序的模块和依赖项，并且配置了应用程序的生命周期事件。

app.module.ts是Ionic的根模块，告诉Ionic如何组装应用。根模块用来引导并运行应用。可以为根模块的输出类取任何名称，默认名称为AppModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
1.1.1 引入依赖
// Angular核心
import { NgModule } from '@angular/core';
// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// 路由
import { RouteReuseStrategy } from '@angular/router';
 
// Ionic核心模块
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
// 启动画面插件相关服务
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
// 导航条插件相关服务
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
// 根路由
import { AppRoutingModule } from './app-routing.module';
// 根组件
import { AppComponent } from './app.component';
1.1.2 @NgModule装饰器

创建功能模块，接收用来描述模块属性的元数据对象。可以将AppModule标记为Angular模块类（也叫NgModule类），告诉Angular如何编译和启动应用。

@NgModule({
    //...
})
export class AppModule {}
1.1.3 declarations

配置当前项目运行的组件（声明组件）。

@NgModule({
    declarations: [AppComponent]
})
export class AppModule {}
1.1.4 imports

配置当前模块运行依赖的其它模块。

@NgModule({
    imports: [
        BrowserModule,  //浏览器解析
        IonicModule.forRoot(), 
        AppRoutingModule], //路由配置
})
export class AppModule {}
1.1.5 providers

配置项目所需要的服务。自定义的服务要在此声明，引入的ionic-native插件也要在次声明。

@NgModule({
    providers: [
        StatusBar,  //导航条
        SplashScreen, //启动画面
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //注册一个路由服务
  ],
})
export class AppModule {}
1.1.6 bootstrap

指定应用的主视图，通过引导AppModule来启动应用，这里默认写的是根组件。

@NgModule({
    bootstrap: [AppComponent]
})
export class AppModule {}
1.1.7 export

导出模块。根模块AppModule没有其它模块调用，所以不需要导出任何内容，但必须要写。

export class AppModule {}

2 创建页面以及页面跳转

  1. cd 到我们的项目目录
C:\Users\zhaoshuai-lc\Desktop\ionic-demo\myApp>
  1. 通过 ionic g page 页面名称如下图所示
C:\Users\zhaoshuai-lc\Desktop\ionic-demo\myApp>ionic g page button
> ng.cmd generate page button
CREATE src/app/button/button-routing.module.ts (347 bytes)
CREATE src/app/button/button.module.ts (472 bytes)
CREATE src/app/button/button.page.html (302 bytes)
CREATE src/app/button/button.page.spec.ts (452 bytes)
CREATE src/app/button/button.page.ts (256 bytes)
CREATE src/app/button/button.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (534 bytes)
[OK] Generated page!

  1. 创建完成组件以后会在src 目录下面多一个button 的目录，它既是一个页面也是一个模块
    在这里插入图片描述
    在这里插入图片描述

  2. 如果我们想在tab1 里面写一个按钮点击跳转到 button 页面的话我们可以通过使用Angular 的路由跳转。在ionic4.x 中路由是完全基于angular，用法几乎和angular 一样。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-button color="primary" [routerLink] = "['/button']">跳转到button页面</ion-button>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
  1. ionic4.x 中跳转到其他页面不会默认加返回按钮，如果我们想给button 页面加返回的话需要找到button 对应的button.page.html，然后在再头部加入ion-back-button。
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab1" text="back" icon="caret-back"></ion-back-button>
    </ion-buttons>
    <ion-title>button</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">button</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

3 Ionic4.x 新增底部tabs 页面

  1. 创建tab4 模块
ionic g page tab4
  1. 修改根目录里app-routing.module.ts 文件里面的路由配置，去掉默认增加的路由
    在这里插入图片描述
  2. tabs.router.module.ts 中新增路由
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      }
  1. tabs.page.html 中新增底部tab 切换按钮
<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" href="/tabs/tab1">
      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" href="/tabs/tab2">
      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" href="/tabs/tab3">
      <ion-icon aria-hidden="true" name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4" href="/tabs/tab4">
      <ion-icon aria-hidden="true" name="settings"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

4 Ionic4.x 中自定义公共模块

  1. 创建公共模块以及组件
ionic g module module/slide
ionic g component module/slide

在这里插入图片描述

  1. 公共模块slide.module.ts 中暴露对应的组件
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

// 1 导入组件
import {SlideComponent} from "./slide.component";


@NgModule({
  // 2 声明组件
  declarations: [SlideComponent],
  imports: [
    CommonModule
  ],
  // 3 暴露组件
  exports: [SlideComponent]
})
export class SlideModule {
}
  1. 用到的地方引入自定义模块，并依赖注入自定义模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { Tab4PageRoutingModule } from './tab4-routing.module';

import { Tab4Page } from './tab4.page';

// 1 引入自定义模块
import {SlideModule} from "../module/slide/slide.module";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Tab4PageRoutingModule,
    // 2 依赖注入自定义模块
    SlideModule
  ],
  declarations: [Tab4Page]
})
export class Tab4PageModule {}
  1. 使用自定义模块
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>tab4</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">tab4</ion-title>
    </ion-toolbar>
  </ion-header>
<!--  使用模块-->
  <ion-content>
    <app-slide></app-slide>
  </ion-content>
</ion-content>

5 Ionic4.x 自定义公共模块中使用 ionic 内置组件

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';


import {SlideComponent} from "./slide.component";
// 1 导入ionic核心模块
import {IonicModule} from "@ionic/angular";


@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule,
    // 2 依赖注入ionic核心模块
    IonicModule
  ],
  exports: [SlideComponent]
})
export class SlideModule {
}


<p>
  slide works!
</p>
<ion-button>ionic-button</ion-button>

6 page和module的区别?

在Ionic框架中，Page和Module是两个重要的概念，它们有以下区别：

  • 定义方式：Module是Angular的概念，用于声明、配置和组装应用模块。而Page是Ionic的概念，通常指的是一个单独的页面或视图。
  • 功能：Module主要负责组织和维护代码，它包含组件、服务、指令等。Page则更关注的是页面的呈现和用户的交互。
  • 生命周期：Module的生命周期主要依赖于Angular的依赖注入机制。而Page的生命周期则与Ionic的导航和路由系统密切相关。
  • 使用场景：在复杂的Angular应用中，我们会使用Module来组织代码。而在Ionic应用中，Page通常用于定义和管理各个页面或视图。
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1176694.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

亚马逊与TEMU平台欧代英代如何注册？注册欧代/英代流程及注意事项

亚马逊与TEMU平台欧代英代如何注册？注册欧代/英代流程及注意事项

亚马逊与TEMU平台欧代英代如何注册&#xff1f;注册欧代/英代流程及注意事项 亚马逊平台的商家的产品&#xff0c;由于受到欧盟商品安全新法规市场监管法规欧盟要求所有标有CE标志的商品&#xff0c;都要拥有欧盟境内的欧代作为商品合规的联系方式(也称为负责人)。由于英国脱离…
阅读更多...
RFID技术在固定资产的应用

RFID技术在固定资产的应用

作为RFID系统中不可或缺的关键组件&#xff0c;读写器在固定资产管理中扮演着重要的角色。它利用RFID技术&#xff0c;能够迅速而有效地捕获、记录和跟踪资产信息&#xff0c;以实现更为高效和准确的资产管理。在本文中&#xff0c;我们将深入探讨RFID技术在固定资产管理领域的…
阅读更多...
SQL注入之Sqli-labs第二关

SQL注入之Sqli-labs第二关

本次注入sql-labs的第二关 1.进入第二关后&#xff0c;我们可以看到英语 please input the id as parameter with numeric value&#xff0c;请输入ID作为参数和数值。首先我们可以判断出这是一个GET请求作为注入点的题目&#xff0c;那么我们就需要去URL上拼接ID的值&#xff…
阅读更多...
红队专题-新型webshell的研究

红队专题-新型webshell的研究

新型webshell的研究 招募六边形战士队员webshell与MemoryShell内存马新型一句话木马之Java篇 AES加密Class二进制解析友军防护为什么会被拦截SO waf防护规则END 一劳永逸绕过waf实现篇服务端实现 前言&#xff1a;你马没了利用JavaAgent技术发现并清除系统中的内存马介绍安全行…
阅读更多...
如何快速学会自动化测试？

如何快速学会自动化测试？

前言 自动化测试是现代软件开发领域中越来越流行的一种测试方法。它使用软件工具和脚本来执行测试&#xff0c;以提高测试的效率和准确性&#xff0c;减少测试的成本和时间。下面是一些常见的自动化测试技术&#xff0c;以及它们的优缺点。 同时&#xff0c;在这我准备了一份…
阅读更多...
JavaScript_document对象_属性

JavaScript_document对象_属性

1、document.doctype 2、document.documentElement 3、document.body, document.head 4、document.forms 5、document.images 6、document.scripts 7、document.domain
阅读更多...
【owt】p2p client mfc 工程梳理

【owt】p2p client mfc 工程梳理

1年前构建的，已经搞不清楚了。所以梳理下，争取能用较新的webrtc版本做测试。最早肯定用这个测试跑通过 【owt】p2p Signaling Server 运行、与OWT-P2P-MFC 交互过程及信令分析官方的mfc客户端 估计是构造了多个不同的webrc版本的客户端
阅读更多...
【FastCAE源码阅读5】使用VTK实现鼠标拾取对象并高亮

【FastCAE源码阅读5】使用VTK实现鼠标拾取对象并高亮

一、拾取对象 拾取对象是在PropPickerInteractionStyle类实现的&#xff0c;该类是vtkInteractorStyleRubberBandPick的子类&#xff0c;重写原来的鼠标处理函数。当鼠标左键按下&#xff0c;会触发以下代码&#xff1a; void PropPickerInteractionStyle::clickSelectGeomet…
阅读更多...
51单片机中断函数讲解及外部中断举例

51单片机中断函数讲解及外部中断举例

文章目录 前言一、中断是什么&#xff1f;1.只有一个中断2. 什么东西可以中断&#xff1f;3. 有两个中断&#xff1f;中断嵌套4. 是否支持更多中断嵌套&#xff1f;5. 中断响应过程&#xff1f;6. 中断服务函数7.寄存器 二、外部中断实现1.中断配置2.参考程序3. 实验14.实验2 总…
阅读更多...
性能工作站，双十一大促，超值推荐：蝰蛇峡谷 NUC12SNKi7迷你主机，优惠抢购！

性能工作站，双十一大促，超值推荐：蝰蛇峡谷 NUC12SNKi7迷你主机，优惠抢购！

近年来&#xff0c;ITX主机和小型化系统变得越来越受欢迎。英特尔的NUC受到许多玩家们的关注。作为mini主机的代表NUC小巧设计和灵活性使它成为很多玩家和科技爱好者的选择。它的高性能和可玩性使得它在迷你型准系统市场上备受推崇。双11来临之际&#xff0c;我们分析下哪款高性…
阅读更多...
黑盒测试用例设计方法之等价类划分法

黑盒测试用例设计方法之等价类划分法

等价类划分法是一种典型的黑盒测试用例设计方法。采用等价类划分法时&#xff0c;完全不用考虑程序内部结构&#xff0c;设计测试用例的唯一依据是软件需求规格说明书。 等价类 所谓等价类&#xff0c;是输入条件的一个子集合&#xff0c;该输入集合中的数据对于揭示程序中的…
阅读更多...
C++编程案例讲解-基于结构体的控制台通讯录管理系统

C++编程案例讲解-基于结构体的控制台通讯录管理系统

基于结构体的控制台通讯录管理系统 通讯录是一个可以记录亲人、好友信息的工具&#xff0c;系统中需要实现的功能如下&#xff1a; 添加联系人&#xff1a;向通讯录中添加新人&#xff0c;信息包括&#xff08;姓名、性别、年龄、联系电话、家庭住址&#xff09;最多记录1000人…
阅读更多...
BuhoCleaner for Mac：彻底改变您的Mac清理体验

BuhoCleaner for Mac：彻底改变您的Mac清理体验

BuhoCleaner for Mac是一款专为Mac用户打造的清理工具&#xff0c;它可以帮助您清理无用的文件、缓存、日志和其他垃圾&#xff0c;从而释放磁盘空间并提高系统性能。这款工具具有简单易用的界面和强大的清理功能&#xff0c;是Mac用户必备的清理工具之一。 特点 简单易用的界…
阅读更多...
3D RPG Course | Core 学习日记四：鼠标控制人物移动

3D RPG Course | Core 学习日记四：鼠标控制人物移动

前言 前边我们做好了Navgation智能导航地图烘焙&#xff0c;并且设置好了Player的NavMeshAgent&#xff0c;现在我们可以开始实现鼠标控制人物的移动了。除了控制人物移动以外&#xff0c;我们还需要实现鼠标指针的变换。 实现要点 要实现鼠标控制人物移动&#xff0c;点击…
阅读更多...
VHDL基础知识笔记(1)

VHDL基础知识笔记(1)

1.实体&#xff1a;其电路意义相当于器件&#xff0c;它相当于电路原理图上的元器件符号。它给出了器件的输入输出引脚。实体又被称为模块。 2.结构体&#xff1a;这个部分会给出实体&#xff08;或者说模块&#xff09;的具体实现&#xff0c;指定输入和输出的行为。结构体的…
阅读更多...
十分钟搭建自己的在线书库随时随地看小说，Kindle不再盖泡面！

十分钟搭建自己的在线书库随时随地看小说，Kindle不再盖泡面！

Kindle中国电子书店停运不要慌&#xff0c;十分钟搭建自己的在线书库随时随地看小说&#xff01; 文章目录 Kindle中国电子书店停运不要慌&#xff0c;十分钟搭建自己的在线书库随时随地看小说&#xff01;1.网络书库软件下载安装2.网络书库服务器设置3.内网穿透工具设置4.公网…
阅读更多...
5K买的300集全套JAVA面试视频、10W+字文档成功上岸一线互联网大厂

5K买的300集全套JAVA面试视频、10W+字文档成功上岸一线互联网大厂

前言&#xff1a; 今年这情况&#xff0c;真心建议所有 Java 后端不要随便被“行情差洗脑”&#xff01; 目前职友集上搜到的 java 岗位仍有22万&#xff0c;招聘需求相比其他行业不算少&#xff01; 大家最应该关注的是&#xff1a;自身技术硬度如何&#xff1f; 毕竟不管在…
阅读更多...
Redis学习（十）RedisTemplate 对各种数据类型的支持

Redis学习（十）RedisTemplate 对各种数据类型的支持

目录 一、SpringDataRedis 简介1.1 什么是 Redis&#xff1f;1.2 什么是 Jedis&#xff1f;1.3 什么是 Spring Data Redis&#xff1f; 二、RedisTemplate 中 API 使用2.1 pom.xml 依赖2.2 配置文件2.3 RedisTemplate 的直接方法2.4 String 类型相关操作2.5 Hash 类型相关操作2…
阅读更多...
台灯选用什么类型好？双十一值得入手的护眼台灯推荐

台灯选用什么类型好？双十一值得入手的护眼台灯推荐

如何给孩子挑选一盏能够护眼的台灯一直是许多家长都为之头痛的一大难题&#xff0c;主要是如今市面上的台灯实在太多了&#xff0c;而且迭代速度非常快&#xff0c;再加上这些产品中还混杂了许多不专业品牌、网红产品和低价劣质产品等等&#xff0c;想要挑选到一款好的台灯确实…
阅读更多...
MVC模式和三层架构：

MVC模式和三层架构：

MVC模式&#xff1a; M&#xff1a;Model&#xff0c;业务模型&#xff0c;处理业务 V&#xff1a;View&#xff0c;视图&#xff0c;界面展示 C&#xff1a;Controller&#xff0c;控制器&#xff0c;处理请求&#xff0c;调用模型和视图 MVC优点&#xff1a; 职责单一&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023