Angularjs2-下拉列表实现(父子组件通信)

Posted on | In
Angularjs2-下拉列表实现(父子组件通信)

基于http://valor-software.com/ng2-bootstrap/#/dropdowns 做的一个下拉列表控件，优化了如下功能：

  • 列表内容由父组件传递
  • 子组件选择框发生变化后会通知父组件

项目地址

demo

demo-new.gif

列表内容由父组件传递

这个主要利用到了ng2的Input，在子组件中声明一个变量，该变量的值可以从父组件获取：

1
2
3
4
5
import { Component,Input,Output,EventEmitter } from '@angular/core';
...
// 父组件传递进来的参数
@Input('list') private list:any;
...

父组件中，可以这样传值：

1
<my-drop-down-cmp [list]='list'></my-drop-down-cmp>

子组件选择框发生变化后会通知父组件

实现这个用到了ng2的Output，声明一个EventEmit的对象，用于向父组件发送消息

1
2
3
4
5
6
7
8
9
10
// 当改变了选择时给父组件发送事件
@Output('selectChange') private selectChange = new EventEmitter();
...
// 当点击了下拉列表中的某一项
public changeSelect(id: any,text: any,i: any) {
  this.text = text;
  this.id = id;
  // 发送事件
  this._selectChange.emit({id:id,text:text,index:i})
}

父组件中，通过如下方式接收事件：

1
2
3
4
5
6
<my-drop-down-cmp (_selectChange)='onChangeSelect($event)'></my-drop-down-cmp>
...
// 事件处理函数
onChangeSelect(e:any) {
  this.selectId = e.id;
}