基于http://valor-software.com/ng2-bootstrap/#/dropdowns 做的一個下拉列表控件塑径，優(yōu)化了如下功能墅拭，項目地址
- 列表內(nèi)容由父組件傳遞
- 子組件選擇框發(fā)生變化后會通知父組件
demo
demo-new.gif
列表內(nèi)容由父組件傳遞
這個主要利用到了ng2的Input钦椭，在子組件中聲明一個變量谬晕，該變量的值可以從父組件獲扔颉：
import { Component,Input,Output,EventEmitter } from '@angular/core';
...
// 父組件傳遞進(jìn)來的參數(shù)
@Input('list') private list:any;
...
父組件中凑耻，可以這樣傳值：
<my-drop-down-cmp [list]='list'></my-drop-down-cmp>
子組件選擇框發(fā)生變化后會通知父組件
實現(xiàn)這個用到了ng2的Output，聲明一個EventEmit的對象柠贤，用于向父組件發(fā)送消息
// 當(dāng)改變了選擇時給父組件發(fā)送事件
@Output('selectChange') private selectChange = new EventEmitter();
...
// 當(dāng)點擊了下拉列表中的某一項
public changeSelect(id: any,text: any,i: any) {
this.text = text;
this.id = id;
// 發(fā)送事件
this._selectChange.emit({id:id,text:text,index:i})
}
父組件中香浩，通過如下方式接收事件：
<my-drop-down-cmp (_selectChange)='onChangeSelect($event)'></my-drop-down-cmp>
...
// 事件處理函數(shù)
onChangeSelect(e:any) {
this.selectId = e.id;
}
歡迎訪問我的博客
