详解Angular2中Input和Output用法及示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解Angular2中Input和Output用法及示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1926字,纯文字阅读大概需要3分钟。
内容图文
![详解Angular2中Input和Output用法及示例](/upload/InfoBanner/zyjiaocheng/344/fb644ef0eb5d488e8b15d0e6bb5f236b.jpg)
对于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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的详解Angular2中Input和Output用法及示例全部内容,希望文章能够帮你解决详解Angular2中Input和Output用法及示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。