Input和Output如何在Angular2中使用

今天就跟大家聊聊有关Input和Output如何在Angular2中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了广阳免费建站欢迎大家使用!

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

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

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

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

//app.component.html



//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

 {{item}}

//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();  constructor() { }  ngOnInit() {  }  fireChildEvent(index){   this.childEvent.emit(index);  } }

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

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

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

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

看完上述内容,你们对Input和Output如何在Angular2中使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


文章标题:Input和Output如何在Angular2中使用
URL分享:http://myzitong.com/article/jgjdds.html