ionic3-angular4
weijun-w
这个作者很懒,什么都没留下…
展开
-
ionic3自定义组件以及组件间的双向通信
1、在一个项目下创建一个页面Test1Page:ionic g page test12、创建一个组件commen:ionic g component commen,我们在Test1Page页面中引入组件commen,创建完成后目录如图:3、在commen.html中,代码如下:<div> <div [ngClass]="{'checkbox': true, 'is-o...原创 2019-02-21 14:27:51 · 1394 阅读 · 0 评论 -
ionic3自定义指令(自定义结构型指令和属性型指令)
ionic start demo tans创建项目后;一、属性型指令:1、命令行创建指令:ionic g directive change-color ;会生成一个directives的目录2、directives/change-color/change-color.ts文件中:import { Directive, Input, ElementRef, HostListener } fr...原创 2019-02-22 13:32:01 · 942 阅读 · 1 评论 -
ionic3顶部tabs点击切换功能
1、新建项目,ionic start demo tabs ,选择在Home页面做这个功能2、在home.html页面:<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar>&原创 2019-02-20 17:03:54 · 1130 阅读 · 0 评论 -
ionic3自定义管道
1、ionic start demo tabs,创建项目2、ionic g pipe change-text, 创建一个管道,创建成功后目录中会多一个pipe目录,如图:3、我们做一个改变字符串的管道,相当于ng1中的过滤,需要在app.module.ts中引入:app.module.ts:import { NgModule, ErrorHandler } from '@angular/...原创 2019-02-26 14:23:45 · 441 阅读 · 0 评论 -
ionic3自定义服务
1、创建项目:ionic start demo tabs;2、创建一个服务:ionic g provider data-server,可以做一个保存本地存储的服务用来各个页面调用,部分截图如下:3、在app.module.ts中引入服务:app.module.ts:import { NgModule, ErrorHandler } from '@angular/core';import...原创 2019-02-26 14:32:26 · 623 阅读 · 0 评论