Ionic 模块组件的理解

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.mzph.cn/news/133963.shtml

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

相关文章

基于javaweb+mysql的jsp+servlet学生成绩管理系统(管理员、教师、学生)

基于javaweb+mysql的jsp+servlet学生成绩管理系统(管理员、教师、学生)

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;9.9元拿走&#xff01; 基于javawebmysql的jspservlet学生成绩管理系统(管理员、教师、学生)(javajspservletjavabeanmysqltomcat) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myecl…
阅读更多...
UE5 c++将自定义UserWdiget添加到对应菜单栏

UE5 c++将自定义UserWdiget添加到对应菜单栏

前言&#xff1a; 为了实现与UserWidget一致的右键添加&#xff0c;便有了此章 注&#xff1a;这里使用的是UE5.3 目标内容&#xff1a; 这里可以参考UserWidget的源码&#xff0c;拷贝一份属于自己的就ok&#xff08;本篇章只是全改成了属于自己的CommonUserWidget&#xff…
阅读更多...
Android 使用.9图 NinePatchDrawable实现动态聊天气泡

Android 使用.9图 NinePatchDrawable实现动态聊天气泡

最近一段时间&#xff0c;在做一个需求&#xff0c;需要实现一个聊天气泡的动画效果&#xff0c;如下图所示&#xff1a; GitHub源码demo &#xff0c;建议下载demo&#xff0c;运行查看。 动态聊天气泡动画 静态聊天气泡 经过一段时间调研&#xff0c;实现方案如下: 实现方…
阅读更多...
栈（定义，基本操作，顺序存储，链式存储）

栈（定义，基本操作，顺序存储，链式存储）

目录 1.栈的定义1.重要术语2.特点 2.栈的基本操作3.栈的顺序存储1.顺序栈的定义2.基本操作1.初始化2.进栈3.出栈4.读栈顶 3.共享栈 4.栈的链式存储 1.栈的定义 栈( Stack&#xff09;是只允许在一端进行插入或删除操作的线性表。 一种受限的线性表&#xff0c;只能在栈顶进行插…
阅读更多...
高校为什么需要大数据挖掘平台？

高校为什么需要大数据挖掘平台？

目前数据挖掘已经成为各种应用领域的重要技术&#xff0c;大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识&#xff0c;也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去&#xff0c;教学过程理…
阅读更多...
Vscode禁止插件自动更新

Vscode禁止插件自动更新

由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2&#xff0c;电脑vscode的python插件装的也是2022年4月份的某个版本&#xff0c;但插件经常自动更新&#xff0c;导致python代码无法Debug,解决办法&#xff1a; 点设置&#xff0c;搜autoUpdate, 把红色框选成无
阅读更多...
MicroStation二次开发问题记录（1）：打开项目时自动加载dll文件

MicroStation二次开发问题记录（1）：打开项目时自动加载dll文件

环境配置 Windows10 MicroStation CE Update16 Visual Studio 2019 前言 开发好的dll文件若每次都需要在打开MS时单独加载&#xff0c;则过于繁琐&#xff0c;因此可以在确定的工程项目文件中进行一次设置&#xff0c;在打开该文件时自动加载 一、加载dll文件 1. 点击File—Se…
阅读更多...
【模型推理优化学习笔记】CUDA加速矩阵乘计算

【模型推理优化学习笔记】CUDA加速矩阵乘计算

矩阵乘可以利用gpu多线程并行的特点进行加速计算&#xff0c;但是传统简单的方法需要多次读取数据到寄存器中&#xff0c;增加耗时&#xff0c;因此利用gpu的共享内存可以被一个block内的所有线程访问到的特性&#xff0c;结合tiling技术进行加速计算。 理论部分不解释了&#…
阅读更多...
k8s ingress 代理 mysql 3306端口

k8s ingress 代理 mysql 3306端口

helm 安装 ingress-nginx helm upgrade --install ingress-nginx ingress-nginx \--repo https://kubernetes.github.io/ingress-nginx \--namespace ingress-nginx --create-namespace执行命令 kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-ngin…
阅读更多...
ROS学习笔记（5）:ros_control

ROS学习笔记（5）:ros_control

1.ros_control简介 ros_control - ROS Wiki ros_control是为ROS提供的机器人控制包&#xff0c;包含一系列控制器接口、传动装置接口、控制器工具箱等,有效帮助机器人应用功能包快速落地&#xff0c;提高开发效率。 2.ros_control框架 ros_control总体框架&#xff1a; 针对…
阅读更多...
【微服务 Spring Cloud 6】服务如何拆分？使用微服务的注意事项？

【微服务 Spring Cloud 6】服务如何拆分？使用微服务的注意事项？

目录 一、前言二、单体服务的弊端三、微服务化四、服务如何拆分&#xff1f;1、拆分原则2、拆分时机和拆分方法3、拆分实践 五、使用微服务的注意事项1、确保相关业务和利益相关者的支持2、确定微服务的拆分粒度3、遵循微服务架构的原则4、确保接口的稳定性5、关注数据一致性6、…
阅读更多...
百数低代码与AI：实现业务智能化的新途径

百数低代码与AI：实现业务智能化的新途径

今年6月&#xff0c;咨询机构麦肯锡发布了的一份题为《生成式人工智能的经济潜力》的研究报告&#xff0c;在报告中&#xff0c;分析师们通过对47个国家及地区的850种职业&#xff08;全球80%以上劳动人口&#xff09;的研究&#xff0c;探讨了在AI成指数级发展背后&#xff0c…
阅读更多...
Shaderlab属性块

Shaderlab属性块

文档 官方文档 作用 参数显示在外部&#xff0c;可自定义调节。 语法 _Name(“Display Name”,type)defaultvalue _Name&#xff1a;必须使用下划线开始 Display Name:材质面板上显示的内容 type:属性的类型 dafaultvalue:类型的默认值 必须赋值 常用类型 Float:浮点数 …
阅读更多...
PostgreSQL简介及安装步骤

PostgreSQL简介及安装步骤

PostgreSQL简介 PostgreSQL是一款开源的关系型数据库管理系统&#xff0c;具有强大的扩展性、高度的可定制性和可靠的稳定性&#xff0c;因此在企业级应用和开发领域中得到了广泛的应用。本文将介绍PostgreSQL的基本概念以及在各种操作系统上的安装步骤。 安装步骤 1. Window…
阅读更多...
18、Flink的SQL 支持的操作和语法

18、Flink的SQL 支持的操作和语法

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…
阅读更多...
05【保姆级】-GO语言的标识符

05【保姆级】-GO语言的标识符

之前我学过C、Java、Python语言时总结的经验&#xff1a; 先建立整体框架&#xff0c;然后再去抠细节。先Know how&#xff0c;然后know why。先做出来&#xff0c;然后再去一点点研究&#xff0c;才会事半功倍。适当的囫囵吞枣。因为死抠某个知识点很浪费时间的。对于GO语言&a…
阅读更多...
vscode + cmake + opencv example

vscode + cmake + opencv example

nice try on macos CMakeLists.txt cmake_minimum_required(VERSION 3.20) #添加OPENCV库 #指定OpenCV版本&#xff0c;代码如下 #find_package(OpenCV 3.3 REQUIRED) #如果不需要指定OpenCV版本&#xff0c;代码如下 find_package(OpenCV REQUIRED)#添加OpenCV头文件 includ…
阅读更多...
智能语音和自然语言处理技术

智能语音和自然语言处理技术

一、定义 智能语音和自然语言处理技术是指通过计算机技术实现人机交互的一种技术。它可以让计算机和人类之间进行自然而流畅的交流&#xff0c;从而实现更高效、更便捷、更智能的信息交流和处理。 智能语音和自然语言处理技术主要包括语音识别、语音合成、自然语言理解、自然…
阅读更多...
CRM客户管理系统究竟是什么？如何实施？

CRM客户管理系统究竟是什么？如何实施？

很多销售人员都不是特别喜欢使用信息化软件&#xff0c;然而从销售经理的角度看&#xff0c;信息化又的确提升了团队的管理效率和业绩。追究这些矛盾的原因&#xff0c;无外乎几点&#xff1a; 认知角度 → 销售员&#xff1a;数据没用又浪费我时间 VS 销售经理&#xff1a;数…
阅读更多...
openssl交叉编译 （ubuntu+arm）

openssl交叉编译 （ubuntu+arm）

1.下载安装包 wget https://www.openssl.org/source/openssl-1.1.1w.tar.gz 2.解压安装包 tar -zxvf openssl-1.1.1l.tar.gz 3.进入源码文件夹-修改编译器 CCarm-linux-gnueabihf-gcc 4.配置编译参数 ./config no-asm -shared --prefix/home/alientek/sp_test/openssl/sp…
阅读更多...
最新文章

Copyright @ 2022~2023