Ionic4—自定义公共组件

最新推荐文章于 2021-04-24 09:47:09 发布

空城里的往日时光

最新推荐文章于 2021-04-24 09:47:09 发布

阅读量539

点赞数

分类专栏： Ionic

本文链接：https://blog.csdn.net/weixin_42472040/article/details/103084363

版权

本文介绍了在Ionic4中如何定义、暴露、引入公共组件模块，并展示了如何使用内置组件。首先，通过创建模块和组件来实现组件的封装。接着，将组件暴露以便在其他模块中使用。然后，介绍如何引入公共组件模块。最后，演示了如何在项目中利用Ionic内置组件。

摘要由CSDN通过智能技术生成

一、概述

如下图所示，html、scss和ts三个文件共同组成一个组件，将其注入到模块中，最终形成一个完整页面。

Ionic4中页面是由模块组成的，多个模块无法共用同一组件，一个组件只能注入一个模块。所以要想实现组件的共用，只能通过模块。其它模块中可以引入公共模块，所以将组件封装到公共模块，可以实现公共组件的间接引用。

二、定义公共模块

将公共的功能单独抽离出来形成一个模块，在其它模块中引入这个公共模块，达到功能共享的目的。

创建模块

//创建公共模块slide, 放置于app/module文件夹下, 若没有该文件夹则创建之
> ionic g module module/slide

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空城里的往日时光

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

eb_app4.resouce-tree自定义组件

ZYYzyy1993的博客

10-24

149

1、新建自定义组件（1）ionic g 回车，选module，名字为resourceTree 文件目录：src/app/resource-tree文件夹，下面只有一个resource-tree.module.ts文件（2）ionic g 回车，选component，名字为resourceTree 文件目录：resource-tree文件夹下出现html，scss，ts文件 2、【resource-tree.module.ts】模块中引入组件、声明组件， 3、要使用的地方引

ionic4自定义tabs切换.zip

07-03

使用angular路由自定义ionic4中的tabs切换，因为在实际项目中，需要自定义项目目录，需要手动定义tabs。

参与评论您还未登录，请先登录后发表或查看评论

ionic自定义公共模块

愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~

04-19

457

前言一个好的软件应该把公共的内容给封装起来，达到封装的效果。 自定义模块 1.创建公共模块及组件 ionic g module module/slide ionic g component module/slide 2.暴露对应的组件 3.用到的地方引入自定义模块 4.使用自定义模块如果自定义的公共模块中使用ionic内置组件，需要引入： ...

ionic4 自定义公共模块，共享组件

菠菜盼娣

04-21

326

1 创建组件及模块 ionic g module module/slide ionic g component module/slide 2 公共模块中暴露对应组件 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SlideComponent } ...

Web开发学习笔记:Ionic4开发自定义组件

JustWantToFly的博客

12-27

465

1.在项目中创建一个自定义模块 ionic g module moduleName 创建完成后会生成一个文件夹,文件夹中有个一个ts文件 2.使用命令创建一个自定义组件(组件创建在上一步创建的模块文件夹下) ionic g component componentName 创建之后的文件夹结构 3.在自定义模块的module.ts文件中引入创建的组件 4.在需要使...

ionic 封装Echarts,自定义组件方便开发调用

苗陈的博客

10-13

2297

1. Ionic 常用命令 2.前期准备工作（1）将echarts 放在项目assets文件夹中（2）在 index.html 引用相关js文件（3）使用命令行创建名为echart的组件，我将它放在了这里。如下图 3.相关代码 (1)html代码 div #containerchart class="myechart">div> (2)

ionic4学习笔记（四）--自定义公共模块

盼盼盼的博客

08-06

913

在angular中，我们都是自定义组件来使用，但是ionic4之后，沿用了angular的模块化思想，使用懒加载的方式加载页面，每个页面都是一个模块，要是继续创建组件的话，不能在多个模块中引用同一组件，所以我们要把模块创建为组件，让模块来引用模块。创建一个tabs项目，在项目中执行命令 ionic g module module/list ionic g component module/lis...

ionic图片轮播

04-07

一个标准的 Ionic 应用通常包括 `www` 目录，它是应用的公共资源存储位置，包含HTML、CSS、JavaScript和其他静态文件。在实现图片轮播时，我们将在 `www` 目录下存放图片资源，并编写相应的代码来处理轮播逻辑。 ##...

ionic-vue-getting-started:Ionic + Vue YouTube入门视频的源代码-vue source code

03-24

5. **配置文件**：如`vue.config.js`，用于自定义Vue CLI的构建设置，包括公共路径、代理设置等。 6. **测试**：可能包含`tests`目录，用于编写单元测试和集成测试，确保代码质量。 7. **服务插件**：如`cordova`...

ionic3自定义插件实现（包含jar包调用，文件结构详解）

11-15

本资源实现了自定义插件，里面包含了jar包调用，并且详细讲解了文件的结构，方便大家借鉴

ionic教程（5）--自定义组件

小牛呼噜噜的博客

01-14

1894

目录 1、新建组件 2、修改app/app.modules.ts 3、在页面中使用自定义的组件 3.1、修改login.moduls.ts中，引入组件 3.2、在login.html中使用 1、新建组件 ionic g component actionSheet 新建名为actionSheet的组件, 组件在src/components里面 2、修改app/app.mo...

Ionic - 组件化开发之自定义组件

LucioCN

01-28

7081

万物皆组件思想,组件化开发,优化项目,省时省力 1,使用命令创建一个表单component ionic g component select-table //其他指令 ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //...

ionic-angularjs开发组件

bingcool

09-29

940

一、前言由于笔者水平有限，在这里只是分享自己开发组件的一些思路~ 摘要：无UI组件类、有UI组件类、有UI组件类型2。欢迎拍砖吐槽 O(∩_∩)O 二、无UI组件类顾名思义，这类组件没有任何表现形式出现在用户界面上，只是一般功能的实现者，也就是平时所用到、所需要开发的 Factory。它一般由 controller 进行调用，用于处理并返回数据。重点是，Fatory 某些方法最好

ionic4之父子公共组件使用

星爷的博客

01-28

1576

1.在创建一个公共的component组件，称为父组件，在其他页面中使用该组件，故其他页面都称为子组件。父子组件之间的传值方式，父组件中使用@input和@output进行接收值和传值，在子标签中使用[input]=“‘red’”，即可将red值传给父组件。在父组件中使用@output定义的变量，如父组件定义@outPut HiHi:EventEmitter<any> =...

ionic4自定义组件报错'ion-' is not a known element:

Pluto

04-12

5897

项目要把顶部返回按钮抽成单个组件，于是使用ionic g component xx/xx/back 生成了组件文件 back.component.html中使用了ion-buttons <ion-buttons slot="start"> <ion-back-button text="返回" color="dark" icon="arrow-back"> </...

Ionic4.x 中自定义公共模块

weixin_30668887的博客

05-30

207

1、创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2、公共模块 slide.module.ts 中暴露对应的组件 import { NgModule } from '@angular/core'; import { CommonMo...

IONIC组件之alert

银二码的代码博客

09-08

1744

1、引入组件 import { AlertController } from 'ionic-angular'; 2、声明组件（在.ts文件中） //此处即是声明，可以在括号中声明任意组件，可以多个 constructor(public alertCtrl: AlertController) { } 3、创建alert函数，可以传值方便多次调用 showAlert(string) { ...

ionic5 中组件内置颜色、自定义组件样式

u010574271的博客

04-24

816

准备我们使用ionic start ionicdemo04来新建一个项目我们使用ionic g page button来创建一个页面来测试内置颜色和自定义组件样式项目结构如下：接下来我们就在tab1页面上定义一个按钮用于跳转到button页面 tab1.page.html <ion-button [routerLink]="['/button']"> 跳转到button页面 </ion-button> 默认颜色的使用 ionic中有很多内置颜色可供选择，省去了

ionic 修改组件默认样式_Ionic4自定义组件颜色以及扩展默认颜色