全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

详解Angular2中Input和Output用法及示例

对于angular2中的Input和Output可以和AngularJS中指令作类比。

Input相当于指令的值绑定,无论是单向的(@)还是双向的(=)。都是将父作用域的值“输入”到子作用域中,然后子作用域进行相关处理。

Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件“输出到”父作用域中,在父作用域中处理。

看个angular2示例吧,我们定义一个子组件,获取父作用域的数组值并以列表形式显示,然后当点击子组件的元素时调用父组件的方法将该元素删除。

//app.component.html
<app-child [values]="data" (childEvent) = "getChildEvent($event)">
</app-child>

//app.component.ts
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 data = [1,2,3];

 getChildEvent(index){
  console.log(index);
  this.data.splice(index,1);
 }
}

以上是跟组件app-root的组件类及模板,可以我们把data输入到子组件app-child中,然后接收childEvent事件并对其进行响应。

//app-child.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)">
 {{item}}
</p>


//app-child.component.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 @Input() values;
 @Output() childEvent = new EventEmitter<any>();
 constructor() { }

 ngOnInit() {

 }
 fireChildEvent(index){
  this.childEvent.emit(index);
 }
}

子组件定义了values接收了父组件的输入,这里就是data值,然后使用ngFor指令显示。

当点击每个元素的时候触发了click事件,执行fireChildEvent函数,该函数要将元素的index值“输出”到父组件中进行处理。

Output一般都是一个EventEmitter的实例,使用实例的emit方法将参数emit到父组件中,触发父组件的childEvent事件。

然后父组件监听到该事件的发生,执行对应的处理函数getChildEvent,删除传递的元素索引指向的数据,同时,视图更新。

实际效果:

源码地址:https://github.com/justforuse/angular2-demo/tree/master/angular-input-output

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# angular  # input  # output  # angular2  # Angular2 组件间通过@Input @Output通讯示例  # Angular 2父子组件数据传递之@Input和@Output详解(下)  # Angular 2父子组件数据传递之@Input和@Output详解 (上)  # angular2 ng2 @input和@output理解及示例  # 都是  # 绑定  # 对其  # 要将  # 并以  # 将该  # 大家多多  # 到该  # 看个  # data  # gt  # childEvent  # event  # getChildEvent  # templateUrl  # styleUrls  # css  # root  # ts  # Component 


相关文章: 极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异?  建站上市公司网站建设方案与SEO优化服务定制指南  学校为何禁止电信移动建设网站?  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  东莞专业制作网站的公司,东莞大学生网的网址是什么?  如何选择可靠的免备案建站服务器?  深圳网站制作的公司有哪些,dido官方网站?  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思?  如何在Windows虚拟主机上快速搭建网站?  如何在Ubuntu系统下快速搭建WordPress个人网站?  深圳网站制作平台,深圳市做网站好的公司有哪些?  湖州网站制作公司有哪些,浙江中蓝新能源公司官网?  建站主机选哪家性价比最高?  如何在七牛云存储上搭建网站并设置自定义域名?  C++如何使用std::optional?(处理可选值)  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  西安大型网站制作公司,西安招聘网站最好的是哪个?  如何用免费手机建站系统零基础打造专业网站?  如何选择长沙网站建站模板?H5响应式与品牌定制哪个更优?  在线教育网站制作平台,山西立德教育官网?  建站主机无法访问?如何排查域名与服务器问题  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好?  英语简历制作免费网站推荐,如何将简历翻译成英文?  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网?  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些?  建站之星×万网:智能建站系统+自助建站平台一键生成  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站?  建站之星微信建站一键生成小程序+多端营销系统  自助网站制作软件,个人如何自助建网站?  打鱼网站制作软件,波克捕鱼官方号怎么注册?  韩国服务器如何优化跨境访问实现高效连接?  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的?  网站图片在线制作软件,怎么在图片上做链接?  如何高效配置香港服务器实现快速建站?  制作网站的基本流程,设计网站的软件是什么?  成都响应式网站开发,dw怎么把手机适应页面变成网页?  简易网站制作视频教程,使用记事本编写一个简单的网页html文件?  如何实现建站之星域名转发设置?  广东专业制作网站有哪些,广东省能源集团有限公司官网?  音乐网站服务器如何优化API响应速度?    岳西云建站教程与模板下载_一站式快速建站系统操作指南  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱?  利用JavaScript实现拖拽改变元素大小  如何在Golang中引入测试模块_Golang测试包导入与使用实践  ,南京靠谱的征婚网站?  ,如何利用word制作宣传手册?  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  微信小程序 input输入框控件详解及实例(多种示例) 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。