详解Angular2中Input和Output用法及示例
程序员文章站
2022-04-09 12:50:38
对于angular2中的input和output可以和angularjs中指令作类比。
input相当于指令的值绑定,无论是单向的(@)还是双向的(=)。都是将父作用域的...
对于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,删除传递的元素索引指向的数据,同时,视图更新。
实际效果:
源码地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: AngularJS折叠菜单实现方法示例
推荐阅读
-
C#异常处理中try和catch语句及finally语句的用法示例
-
Content-Type中application/x-www-form-urlencoded和multipart/form-data的区别及用法详解
-
对python中raw_input()和input()的用法详解
-
button 和input 的区别及在表单form中的用法
-
详解Angular2中Input和Output用法及示例
-
Asp中err和error对象的属性详解及用法示例
-
angular2 ng2 @input和@output理解及示例
-
SQL中JOIN和UNION区别、用法及示例介绍
-
详解PHP中cookie和session的区别及cookie和session用法小结,cookiesession
-
js中Map和Set的用法及区别实例详解