基于http://valor-software.com/ng2-bootstrap/#/dropdowns 做的一個下拉列表控件，優(yōu)化了如下功能，項目地址

• 列表內容由父組件傳遞
• 子組件選擇框發(fā)生變化后會通知父組件

demo

demo-new.gif

列表內容由父組件傳遞

這個主要利用到了ng2的Input，在子組件中聲明一個變量，該變量的值可以從父組件獲?。?/p>

import { Component,Input,Output,EventEmitter } from '@angular/core';
...
// 父組件傳遞進來的參數
@Input('list') private list:any;
...

父組件中，可以這樣傳值：

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

子組件選擇框發(fā)生變化后會通知父組件

實現這個用到了ng2的Output，聲明一個EventEmit的對象，用于向父組件發(fā)送消息

// 當改變了選擇時給父組件發(fā)送事件
@Output('selectChange') private selectChange = new EventEmitter();
...
// 當點擊了下拉列表中的某一項
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>
...
// 事件處理函數
onChangeSelect(e:any) {
  this.selectId = e.id;
}

歡迎訪問我的博客