ionic3+angular4开发混合app 之自定义组件

这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了会再次更新。

首先,在ionic3中有命令可以直接创建一个组件:ionic g component componentName

使用这个命令创建的组件会在components目录下生成一个组件文件夹和一个module文件,具体目录,请看截图:我这里是有3个小组件

并且会把你创建的组件自动import到module里面,你无需在在里面导入模块了,不过如果你需要在自定义组件里面请求数据的话,就需要import相应的服务了

接下来你就可以在自定义组件模块里面定义你的组件了

自定义组件要掌握的知识点主要有两点:

  1.是父组件到子组件之间的传值:父到子之间的传值方式是通过属性来传值

    子组件模块的ts文件里面需要使用@Input()输入,使父模块往子模块传递内容

    

    父组件使用,通过属性的方式传递

    

    这样父组件到子组件就可以传值了。

  2.子组件到父组件之间的传值方式:通过事件来传递

    子组件模块ts需要使用@OutPut()输出向父组件传值,具体用法如下图:

    

    这里的this.gotohome.emit(event);里面的event就是指要传递给父组件的值,下面看模板文件的点击事件:

    

    这里我给父组件传递了一个字符串“123”,这里只是举个例子,实际,我在在这个组件中没有用到这个值,你们可以举一反三,根据你们的需求来传相应的值

    下面看父组件接收到的值对不对?

    

    这里注意一下,接收值,一定要加上$这个符号才能接收到

    

    我这边打印出来,确实接收到了子组件传给父组件的字符串“123”,实际怎么使用看实际的需求了

    到这里,子组件传值给父组件就结束了

如果跟着以上方法实践的同学肯定有疑问了,会一直报错对不对,那就是我接下来要说的事情了,其实很简单,你要用你自己定义的组件,是不是得先导入,有这个东西才能使用吧

接下来就导入自定义的组件:我们一开始给自定义的组件建了一个module,叫做componentsModule

你要使用的时候需要将这个componentsModule导入到相应的module里面去,不然会报错说没有这个组件

用上图来解释会不会更明了一些呢?

如果一些小模块没有自己独立的module,它本身就是依赖于appModule的话,要使用自定义组件,则需要在appModule里面导入componentsModule即可

我要记录的自定组件内容就这么多了,以后接触到更深的层次再更新了~

哪里有写错的地方还望各位大牛指点指点~

谢谢!

时间: 2024-10-07 04:50:42

ionic3+angular4开发混合app 之自定义组件的相关文章

安卓开发_浅谈自定义组件

在Android中,所有的UI界面都是由View类和ViewGroup类及其子类组合而成.其中,View类是所有UI组件的基类,而ViewGroup类是容纳这些UI组件的容器. 其本身也是View类的子类. 在实际开发中,View类还不足以满足程序所有的需求.这时,便可以通过继承View类来开发自己的组件. 开发自定义组件的步骤: 1.创建一个继承android.view.View类的View类,并且重写构造方法. 2.根据需要重写相应的方法. 3.创建并实例化自定义View类,并将其添加到布局

Android开发——构建自定义组件

Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框(CheckBox), 单选框(RadioButton), 滚动条(Gallery), 微调器(Spinner), 等等,还有一些比较先进的有着特殊用途的View组件,例如 AutoCompleteTextView, ImageSwitcher和 TextSwitcher.除此之外,种类繁多的像 线

混合app开发

学习目标: 了解目前移动app开发的三种模式 了解mvc和mvvm架构模式 熟悉混合app的开发应用场景 掌握混合app开发的概念 掌握angularjs.ionic.和cordova在混合app开发中的作用. 目前移动app开发主要分为三种模式 Native App . Web App .Hybrid App 原生ap是使用相应平台特有的开发工具进开发 外观和性能极佳 但开发成本高 因为每一种移动操作系统都需要独立开发项目 web App 网页应用程序 需要依赖于移动端浏览器 主要使用html

慕课网实战—《用组件方式开发 Web App全站 》笔记二

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 项目JS类开发 静态页思路验证 jQuery全屏滚动插件fullPage.js ??使用参考:Fullpage入门指南 组件切换,入场,出场动画 ???? DOM事件循环传播-无限循环 ??使用return false;或者triggerHander()方法阻止事件向上传播. 相关代码 HTML <body&

ionic3.x 自定义组件component双向绑定之自定义计数器

本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //创建组件 ionic g provider YourProviderName /

组件化封装开发Android App实战

详情请交流  QQ  709639943 01.组件化封装开发Android App实战 02.Kotlin系统入门与进阶 03.Node.js入门到企业Web开发中的应用 04.精通高级RxJava 2响应式编程思想 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.快速上手Ionic3 多平台开发企业级问答社区 09.Java Spring Security开发安全的REST服务 10.深入Java虚

React Native电商项目实战混合APP开发 React Native实战 混合APP实战开发

React Native  和 angular+ionic 是目前网络上最火的混合APP开发语言,其功能强大能够开发出安卓和IOS程序! ------------------课程目录------------------ <React Native电商项目实战>├<01React Native初体验>│  ├01-React Native简介.mp4│  ├02-React Native环境搭建.mp4│  ├03-React Native初体验及其它环境搭建.mp4│  └04-R

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c

慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 饼图开发(绘制饼图准备) 饼图实现原理 饼图开发(绘制饼图) 代码 /* 饼图组件对象 */ var H5ComponentPie =function ( name, cfg ) { var component = new H5ComponentBase( name ,cfg ); // 绘制网格线 - 背景层 v