11.1 基本介绍 (欢迎加入Q群一起学习讨论657185219)
angular2 controller 和 Directive 合并成Component ,前文已有介绍,所以我们编写组件和其他普通页面一样。
11.2 组件调用
<page-dropdown
<!--[dataList] 入参 中括号 (dropMenuClick)回调事件小括号-->
[dataList]="dataList" (dropMenuClick)="dropMenuClick($event)">
</page-dropdown>
这里我调用了下拉的组件名字叫page-dropdown下面详细解释
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
// 组件入参
dataList: string [];
constructor(public navCtrl: NavController) {
this.dataList = ["1","2","3"];
}
// 组件回调事件
dropMenuClick (callBack:string) {
console.log("dropMenu_callBack_value:"+callBack);
}
}
11.3 组件的申明
import {Component,Input,Output,EventEmitter} from '@angular/core';
@Component({
selector: 'page-dropdown',
templateUrl: 'dropdown.html'
})
export class DropdownPage {
@Input() dataList:string [];
@Output() dropMenuClick = new EventEmitter<string>();
constructor() {
}
menuClick (clickMenu:string) {
this.dropMenuClick.emit("menu"+"<"+clickMenu+"> is selectd");
}
}
dropdown.html
<ul class="dropdown-menu" >
<li *ngFor="let data of dataList" (click)="menuClick(data)">{{data}}</li>
</ul>
小建议:一帮情况下共用组件统一放在项目下share文件夹下,所有组件申明都放在share.module.ts里面
注意点 :1. @Input() dataList:string []; 顾名思义是输入的意思,组件显示的内容需要从调用处传过来。2. @Output() dropMenuClick = new EventEmitter<string>()相当于回调事件
- 大小: 101 KB
分享到:
相关推荐
ionic 借助插件 cordova-plugin-wechat cordova-plugin-qqsdk 实现微信分享 QQ分享 微博分享
基于ionic+cordova+angularJs搭建移动端App开发环境。
cordova-plugin-camera-5.0.1
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
ionic-ng-cordova-cordovaOauth-example 尝试让Ionic Framework + NG-Cordova和cordovaOauth一起玩 我遵循的步骤: $ node -v v0.12.7 $ npm -v 2.14.2 $ cordova -v 5.3.1 $ ionic -v 1.6.4 $ ionic start myApp ...
最全的跨平台开发技术文档,亲身试验,绝不忽悠。ionic+cordova+angularjs
适用于Cordova的Web View插件,专注于为Ionic应用程序提供最高性能体验(但可与任何Cordova应用程序一起使用)。 该插件在iOS上使用WKWebView,在Android上使用最新的常绿webview。 此外,此插件使Web开发人员期望...
本文档适合初学者阅读,关于介绍nodejs的安装,ionic+cordova 开发移动APP,包括 详细安装教程和打包apk教程。
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。...angular的设计目的是全面解决开发人员的web应用程序工作流。
用ionic3做个打印的功能,自定义个插件demo,并且调用成功
ionic+cordova环境搭建费了一段时间,我把过程整理了下,内容有转载其他人部分,还请原作者见谅。
一共22个pdf文档,适合初学者学习,内容详细。
自定义cordova插件,添加到项目中使用(含参考链接,可自己学习)
ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高。 ...
ionic 3 for develop mobile apps native in mobile phone user
ionic-shopping-cart-2, 离子cordova购物车应用 购物车更新( 10-07-2016 )FoodKart v0.3 已经发布。 在这里阅读完整的教程系列。 FoodKart v0.2 FoodKart是一个简单的食品购买应用,构建在 HTML5 - Cordova 。 因为
cordova-plugin-facebook4, 在Cordova和Ionic项目中,使用最新的Facebook SDK cordova-plugin-facebook4在in项目中使用 Facebook SDK版本 4安装有关版本,请参见npm包 ...faceboo
IOS要求我用过节点物品版本笔记节点12.16.1 npm 6.13.4科尔多瓦物品版本...ionic cordova platform add android 运行ionic cordova build android 运行ionic cordova run androidiOS平台运行ionic cordova platform ...
大家好,我已经使用命令行界面使用ionic和angular js制作了一个演示应用程序,它在Android-4.4.2及其更低版本上运行良好,但是我在此版本的Android-4.4.4设备上对其进行了测试带有一些ui问题。我使用这些命令创建了...
Ionic 的起始项目,可选择支持使用自定义 SCSS。 使用这个项目 我们建议使用ionic实用程序创建基于此项目但使用现成的入门模板的新 Ionic 项目。 例如,要使用默认选项卡界面启动一个新的 Ionic 项目,请确保已安装...