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通常用于定义和管理各个页面或视图。
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【GitHub】Watch、Star、Fork、Follow 有什么区别？

【GitHub】Watch、Star、Fork、Follow 有什么区别？

目录 一、前言二、区别1. Watch2. Star3. Fork4. Follow 一、前言 GitHub 是最受欢迎的代码托管平台之一&#xff0c;拥有大量的开源代码可供学习。 Github 中也有类似 “点赞”、“收藏”、“加关注” 的功能。 下面介绍下&#xff0c;GitHub 中 Watch、Star、Fork、Follow 有…
阅读更多...
Seata分布式事务实现原理

Seata分布式事务实现原理

Seata可以解决分布式事务问题&#xff0c;利用GlobalTransacational(name "fsp-create-order",rollbackFor Exception.class)注解就可以实现全局的事务管理&#xff0c;但是我们需要明白原理的实现。 我们举例创建订单——>调减库存——>调扣余额——>改订…
阅读更多...
配置阿里云镜像加速器 -docker

配置阿里云镜像加速器 -docker

1.百度aliyun 2.找到镜像服务ACR 3.搞一个个人版&#xff0c;身份验证一下就行了很简单 4.找到镜像加速器Centos 5.执行下面4条命令&#xff1a;4条命令直接从上面操作文档中粘贴&#xff0c;不容易出错 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<…
阅读更多...
折叠旗舰新战局：华为先行，OPPO接棒

折叠旗舰新战局：华为先行，OPPO接棒

乌云中的曙光&#xff0c;总能带给人希望。 全球智能手机出货量已经连续八个季度下滑&#xff0c;行业里的乌云挥之不散。不过&#xff0c;也能看到高端市场逆势上涨&#xff0c;散发光亮。个中逻辑在于&#xff0c;当前换机周期已经达到了34个月&#xff0c;只有创新产品才能…
阅读更多...
xray：漏洞扫描利器

xray：漏洞扫描利器

简介 长亭科技旗下的一款网络安全漏洞扫描工具&#xff0c;用于检测和评估web应用程序的安全性。具有一下特点&#xff1a;检测速读快、检查范围广、代码质量高、高级可定制以及安全无危害。属于不开源的项目&#xff0c;用户直接下载xray的可执行文件&#xff0c;即可运行该工…
阅读更多...
【Linux系统】文件 / 文件夹权限：chmod

【Linux系统】文件 / 文件夹权限：chmod

文件 / 文件夹权限&#xff1a;chmod 1.介绍 chmod 命令用于改变文件或目录的访问权限。 改变文件权限 chmod 777 xxx.txt改变文件夹下所有文件的权限 chmod -R 777 *-R 是递归遍历子目录&#xff0c;* 通配符代表要操作的文件。 777 777 777 有 3 3 3 位&#xff0c;最高…
阅读更多...
设计模式之保护性暂停

设计模式之保护性暂停

文章目录 1. 定义2. 实现保护性暂停模式3. Join原理4. 保护性暂停模式的扩展 1. 定义 即Guarded Suspension&#xff0c;用在一个线程等待另一个线程的执行结果。 有一个结果需要从一个线程传递给另一个线程&#xff0c;让他们关联到同一个GuarderObject&#xff08;这就是保…
阅读更多...
Chromebook文件夹应用新功能

Chromebook文件夹应用新功能

种种迹象表明 Google 旗下的 Chromebooks 近期要有大动作了。根据 Google 团队成员透露&#xff0c;公司计划在 Chrome OS 的资源管理器中新增“Recents”&#xff08;最近使用&#xff09;文件&#xff0c;以便于用户更快找到所需要的文件。 种种迹象表明 Google 旗下的 Chro…
阅读更多...
Flutter vs 前端 杂谈：SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

Flutter vs 前端 杂谈：SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用HtmlJS怎么实现 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550…
阅读更多...
有电闭锁继电器 YDB-100 100V 辅助电源DC110V JOSEF约瑟 板后安装

有电闭锁继电器 YDB-100 100V 辅助电源DC110V JOSEF约瑟 板后安装

YDB-100有电闭锁继电器 1 应用 本继电器用于发电厂和变电站内&#xff0c;用作高压母线合接地刀闸的闭锁元件&#xff0c;以防止高压母线带电时合接地刀闸。 2 主要性能 2 1采用进口集成电路和元器件构成。具有原理先进、性能稳定、可靠性高、动作值精度高、离散值小、整定范围…
阅读更多...
文件分片上传设计

文件分片上传设计

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 现在是接近凌晨了&#xff0c;突然有伙伴给我提到了文件分片上传的事情&#xff0c;我一想&#xff0c;这个我熟…
阅读更多...
【全志H616 使用标准库 完成自制串口库（分文件实现） orangepi zero2(开源)】.md updata: 23/11/07

【全志H616 使用标准库 完成自制串口库（分文件实现） orangepi zero2(开源)】.md updata: 23/11/07

文章目录 H616 把玩注意&#xff1a;Linux内核版本5.16 及以上&#xff0c;需手动配置i2c-3 uart5驱动配置示例 分文件编译时需将每个文件一同编译 &#xff08;空格隔开&#xff09;例&#xff1a; ggc a.c b.c b.h -lpthread -lxxx..; 常用命令查看驱动文件查看内核检测信息/…
阅读更多...
美妆行业如何通过自媒体提升品牌曝光

美妆行业如何通过自媒体提升品牌曝光

自媒体的出现使美妆行业的推广方式产生了变化&#xff0c;自媒体平台的用户年轻化、用户基数大、消费力较强&#xff0c;能够接受新鲜事物&#xff0c;为美妆品牌带来广阔的市场和消费人群。 因此自媒体平台的内容运营十分重要&#xff0c;今天媒介盒子就来和大家聊聊&#xf…
阅读更多...
npm install：sill idealTree buildDeps

npm install：sill idealTree buildDeps

执行npm install&#xff0c;卡在 sill idealTree buildDeps PS D:\workspace-groovy\attendance-india-web> npm install -g cnpm --registryhttps://registry.npm.taobao.org [..................] / idealTree:node_global: sill idealTree buildDeps[.................…
阅读更多...
基于厨师算法的无人机航迹规划-附代码

基于厨师算法的无人机航迹规划-附代码

基于厨师算法的无人机航迹规划 文章目录 基于厨师算法的无人机航迹规划1.厨师搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用厨师算法来优化无人机航迹规划。 1.厨师搜索算法 …
阅读更多...
NSSCTF web刷题记录4

NSSCTF web刷题记录4

文章目录 [NSSRound#4 SWPU]1zweb(revenge)[强网杯 2019]高明的黑客[BJDCTF 2020]Cookie is so subtle![MoeCTF 2021]fake game[第五空间 2021]PNG图片转换器[ASIS 2019]Unicorn shop[justCTF 2020]gofs[UUCTF 2022 新生赛]phonecode[b01lers 2020]Life On Mars[HZNUCTF 2023 f…
阅读更多...
Python 中 Selenium 的 getAttribute() 函数

Python 中 Selenium 的 getAttribute() 函数

Selenium 的 Python 模块旨在提供自动化测试过程。 Selenium Python 绑定包括一个用于编写 Selenium WebDriver 功能/验收测试的简单 API。 拥有移动能力并没有多大好处。 我们想要与页面交互&#xff0c;或者更准确地说&#xff0c;与组成页面的 HTML 片段交互。 本文将解释…
阅读更多...
基于springboot和vue的校园二手物品交易管理系统

基于springboot和vue的校园二手物品交易管理系统

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;全网最低价&#xff0c;9.9拿走&#xff01; 基于VUE的校园二手物品交易管理系统8 1、项目介绍 基于VUE的校园二手物品交易管理系统8拥有两种角色 管理员&#xff1a;闲置物品管理、订单管理、用户管理 用户…
阅读更多...
【bug-maven】（一）java: 错误: 不支持发行版本 5 （二）：java: 错误: 无效的源发行版：15

【bug-maven】（一）java: 错误: 不支持发行版本 5 （二）：java: 错误: 无效的源发行版：15

【bug-maven】&#xff08;一&#xff09;java: 错误: 不支持发行版本 5 &#xff08;二&#xff09;&#xff1a;java: 错误: 无效的源发行版&#xff1a;15 &#xff08;一&#xff09;java: 错误: 不支持发行版本 5 报错截图&#xff1a; 出错原因&#xff1a; 打开Projec…
阅读更多...
SAP-MM-查找采购订单的创建和修改日期

SAP-MM-查找采购订单的创建和修改日期

在采购订单页面可以查看采购订单的修改和创建&#xff0c;但是有些内容不能完成看到 例如这个订单显示是用户唐创建&#xff0c;但是他不记得是什么时候创建的&#xff0c;怎么创建的&#xff1f; 点击菜单-环境-表头更改、项目更改&#xff0c;可以查看更改内容 通过这个表可…
阅读更多...
最新文章

Copyright @ 2022~2023