ionic3学习

首先在ngModel中有这集个选项

释义

常用ionic3命令
https://blog.csdn.net/fan2252228703/article/details/78115912

可特么的激动死我了
这是成功添加组建

ionic中创建组建 需要使用命令

ionic g page name

常用的ng创建component命令不生效,应该是我没有研究透彻
在官方组件中使用


ion-navbar报错

猜测可能是版本的问题 本地ng版本是八 应该安装6


搞不懂这个那navbar一直报错
ionic如何创建组件
进入项目
ionic g component name
···
接着引入componentsModer
![引入组件](https://upload-images.jianshu.io/upload_images/11579292-8d5a9ce9b6d914bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![在components的module引入组件](https://upload-images.jianshu.io/upload_images/11579292-3fbb9bc1cc3fac7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
接着在直接使用的页面写入标签
![例子](https://upload-images.jianshu.io/upload_images/11579292-245da8d5701d3347.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#####创建page组件

ionic g page name

生成组件之后在app,module.ts中引入
接着在declarations中注册
以及在entryComponents中引入
####实现页面跳转
在应用页面写入点击事件![image.png](https://upload-images.jianshu.io/upload_images/11579292-ee38c4d58feadf39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ts中引入这两个
![image.png](https://upload-images.jianshu.io/upload_images/11579292-76468b497812d8d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
一个是组件
一个是导航组件
接着在constructor中导入
![image.png](https://upload-images.jianshu.io/upload_images/11579292-b7fbfb11df525425.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

点击事件
![如图](https://upload-images.jianshu.io/upload_images/11579292-87a5a170243a7333.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
就能实现效果
![image.png](https://upload-images.jianshu.io/upload_images/11579292-048854e423e6401e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####ng6引用img就比较骚气了
![assets直接使用](https://upload-images.jianshu.io/upload_images/11579292-40baf4b1c94b337a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####ng的点击事件和vue还是很有区别的
如果按照vue的写法
这样运行函数是不生效的
![函数](https://upload-images.jianshu.io/upload_images/11579292-fa8e6a2470a2b88f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![ng的写法](https://upload-images.jianshu.io/upload_images/11579292-b82a31c981a01194.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容