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
分享到:
相关推荐
Angular 是一个强大的前端 JavaScript 框架,而 Ionic 是基于 Angular 的移动应用开发框架,它提供了一套丰富的组件和工具,使开发者可以快速构建美观的、原生感的移动应用。在 Ionic 应用中,有时我们需要集成原生...
"20 ionic动态组件 $ionicModal $ionicActionSheet $ionicPopup $ionicPopover $ionicLoading.pdf"介绍了ionic中的动态组件,如模态对话框、动作表、弹出框和加载提示,这些都是构建用户交互界面时不可或缺的部分。...
在本文中,我们将深入探讨如何使用Ionic 3和Cordova创建自定义插件,以便实现打印功能。这个过程包括理解这两个框架的工作原理,以及如何将它们结合在一起开发原生移动应用功能。 首先,让我们了解 Ionic 和 ...
2. **导入和使用插件**:在`Ionic 3`的组件或服务中,通过`import { Cordova } from '@ionic-native/core'`引入`Cordova`的装饰器,然后使用`@Cordova()`装饰器暴露插件的方法。 3. **处理异步操作**:由于`Cordova...
2. **构建iOS IPA**:使用命令 `cordova build ios` 构建 iOS 应用。 **安装APP到模拟器** 1. **Android模拟器**:使用命令 `cordova run android --emulator` 将应用安装到 Android 模拟器。 2. **iOS模拟器**:...
【标题】"ionic-app-base-master.zip" 是一个包含 Ionic 应用基础结构的压缩包,主要针对使用 Ionic 框架开发移动应用的开发者。Ionic 是一个流行的开源框架,它基于 Angular 并利用 Cordova 或 Capacitor 实现原生...
##### 第一课:生成一个Ionic2应用 - **启动Ionic CLI**:首先,安装Node.js,然后通过npm全局安装Ionic CLI (`npm install -g ionic`). - **创建新项目**:使用命令 `ionic start myAppName tabs --type=angular` ...
- **创建页面、组件、指令、管道和服务**:这些是Angular的核心概念,也是Ionic 2应用程序的基础构建块。例如,页面代表了一个特定的视图,而组件则封装了视图及其相关行为。 #### 模板与样式 - **模板语法**:...
在这个背景下,`cordova-plugin-seuic-scanner.rar`是一个专门为PDA红外扫码定制的插件,适用于基于Ionic框架的应用。这个插件的特别之处在于它采用了广播方式来处理扫码事件,使得在扫码后可以自动失去焦点并触发...
10. **发布与部署**:掌握将Ionic 2应用打包成iOS和Android应用的流程,以及如何通过App Store和Google Play发布应用。 通过《构建移动应用 with Ionic 2 final2.0》的学习,开发者不仅可以掌握Ionic 2框架的精髓,...
【标题】"01 Ionic Angular Cordova介绍以及Ionic环境搭建-avi.rar"涉及的主要知识点是移动应用开发框架 Ionic、Angular 和 Cordova 的基础知识及其环境配置。这篇文章将详细讲解这三个技术的核心概念、相互关系以及...
标题中的“ionic应用-tab应用+返回键监听”指的是使用Ionic框架构建的一款应用,该应用采用了Tab导航模式,并且集成了返回键监听功能。Ionic是一款基于AngularJS和Apache Cordova的移动应用开发框架,它允许开发者...
根据提供的文件信息,将生成关于使用Ionic2编写移动应用程序的知识点: 首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动...
Ionic框架的核心特点包括使用AngularJS(现在是Angular)进行数据绑定和状态管理,使用Sass进行样式定义,以及提供了一套丰富的UI组件,如导航、滑动、表单等,用于构建具有原生外观和感觉的应用。此外,Ionic还...
总的来说,`cordova-plugins-tntgdlocation.zip` 文件提供了一个自定义的 Cordova 插件,解决了在 Ionic 应用中使用高德地图定位服务的问题。这个插件展示了如何将原生功能与 Web 开发技术结合,为跨平台移动应用...
5. **集成到Ionic应用**:将自定义插件添加到你的 Ionic 2 项目中,使用`ionic plugin add`命令。接着,在你的组件或服务中,通过`window.plugins`对象调用插件方法。 结合给出的链接`...
1. **项目结构**:典型的Vue项目结构,包括`src`目录下的`main.js`入口文件、`App.vue`根组件、`components`目录下的自定义组件等。 2. ** Ionic组件**:在Vue组件中使用Ionic的UI元素,如`ion-button`, `ion-input...
它与Angular和 Capacitor 或 Cordova 配合使用,使开发者能够使用一套代码库跨平台开发iOS、Android和Web应用。 - ** Angular**:Angular是Google维护的一个前端框架,用于构建单页应用程序。它提供了数据绑定、...
在本文中,我们将深入探讨如何在 Ionic 2 项目中创建和使用自定义的 Cordova 插件,特别是在 Android 平台上。Cordova 是一种流行的移动应用开发框架,它允许开发者使用 Web 技术(如 HTML、CSS 和 JavaScript)来...
Ionic 提供了一个美观的UI组件库,用于构建跨平台的应用。这些组件包括按钮、卡片、网格、表单元素等,设计风格符合Material Design和Apple的Human Interface Guidelines。通过使用Ionic,开发者可以用一套代码同时...