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

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

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

demo

列表内容由父组件传递

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

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

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

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

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

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

// 当改变了选择时给父组件发送事件
@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})
}

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

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

=============================

main.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component'
import {enableProdMode} from '@angular/core';
import {provideForms, disableDeprecatedForms} from '@angular/forms';

enableProdMode();

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]);

app.component.ts:

import {Component,ViewChild} from '@angular/core';
import {NgModel} from '@angular/forms';
import {MyDropDownComponent} from './dropdown/my-drop-down';

@Component({
  selector: 'my-app',
  directives: [MyDropDownComponent],
  template: `
  <div id='container'>
    <my-drop-down-cmp [list]='list' [selectId]='list[0].id' (_selectChange)='onChangeSelect($event)'></my-drop-down-cmp>
    <p style='background-color:red;' *ngIf='selectId === 1'>香蕉、西瓜</p>
    <p style='background-color:green;' *ngIf='selectId === 2'>猴子、老虎</p>
  </div>
  `,
  styles:[`
      #container {
        padding-top:100px;
        height:600px;
        400px;
        margin:0 auto;
      }
      p {
        margin-top:100px;
      }
    `]
})
export class AppComponent {
  list = [
    {id:1,text:'水果'},
    {id:2,text:'动物'}
  ]
  selectId = 1;
  onChangeSelect(e:any) {
    this.selectId = e.id;
  }
}

my-drop-down.html:

<div class="drop-down-container" dropdown>
    <button id="chat-dropdown" type="button" class="btn btn-md btn-primary" dropdownToggle [disabled]="disabled">
                {{text}}<span class="caret"></span>
        </button>
    <ul class="dropdown-menu pull-left" role="menu" aria-labelledby="chat-dropdown">
        <li role="menuitem" *ngFor='let l of list; let i = index'>
            <a class="dropdown-item" href='javascript:;' (click)='changeSelect(l.id,l.text,i)'>
                                {{l.text}}
                            </a>
        </li>
    </ul>
</div>

my-drop-down.ts:

import { Component,Input,Output,EventEmitter } from '@angular/core';
import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'my-drop-down-cmp',
    templateUrl: 'my-drop-down.html',
    styles: [`
        ul.pull-left {
          left:0 !important;
        }
        .drop-down-container {
          display: inline-block !important;
        }`
    ],
    directives: [DROPDOWN_DIRECTIVES],
    exportAs: 'myDropDown'
})

export class MyDropDownComponent {
    // 默认选择第一个
    @Input('selectId') private selectId: boolean;
    // 父组件传递进来的参数
    @Input('list') private list:any;
    // 当改变了选择时给父组件发送事件
    @Output('_selectChange') private _selectChange = new EventEmitter();
    private text = '';
    private id:any;

    ngOnInit () {
        if (this.selectId) {
            for (let i=0;i<this.list.length;i++) {
                if (this.list[i].id === this.selectId) {
                    this.text = this.list[i].text;
                    this.id = this.list[0].id;
                }
            }
        }
    }

    public getId () {
        return this.id;
    }

    public changeSelect(id: any,text: any,i: any) {
        this.text = text;
        this.id = id;
        this._selectChange.emit({id:id,text:text,index:i})
    }

}

转发自：http://community.angular.cn/A2AO