以前看ionic2文件的時候在網上搜索發現了一款 某大神開發的 地區選擇外掛，並且支援聯動 升級ionic3後 本來害怕不支援3，又看了文件發現這位大神緊跟官方文件實時更新。。敬佩。。。

並且這款外掛使用非常簡單。和官方提供的原生元件類似。

演示

支援版本

Ionic2 3.0.1

安裝

npm install ion-multi-picker --save

用法

基本的

1.將MultiPickerModule匯入到您的應用/模組。

import { MultiPickerModule } from 'ion-multi-picker';

@NgModule({
  declarations: [
    MyApp
 
,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    MultiPickerModule //Import MultiPickerModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
  providers: []
})
export
 
 class AppModule {}

2.在控制器中初始化選擇器列。

constructor(private navCtrl: NavController) {
  this.simpleColumns = [
    {
      name: 'col1',
      options: [
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' }
      ]
    },{
      name: 'col2',
      options: [
        { text: '
 
1-1', value: '1-1' },
        { text: '1-2', value: '1-2' },
        { text: '2-1', value: '2-1' },
        { text: '2-2', value: '2-2' },
        { text: '3-1', value: '3-1' }
      ]
    },{
      name: 'col3',
      options: [
        { text: '1-1-1', value: '1-1-1' },
        { text: '1-1-2', value: '1-1-2' },
        { text: '1-2-1', value: '1-2-1' },
        { text: '1-2-2', value: '1-2-2' },
        { text: '2-1-1', value: '2-1-1' },
        { text: '2-1-2', value: '2-1-2' },
        { text: '2-2-1', value: '2-2-1' },
        { text: '2-2-2', value: '2-2-2' },
        { text: '3-1-1', value: '3-1-1' },
        { text: '3-1-2', value: '3-1-2' }
      ]
    }
  ];
}

您可以使用parentVal屬性來建立每列之間的依賴關係。

  this.dependentColumns = [
    {
      options: [
        { text: '1', value: '1' },
        { text: '2', value: '2' },
        { text: '3', value: '3' }
      ]
    },{
      options: [
        { text: '1-1', value: '1-1', parentVal: '1' },
        { text: '1-2', value: '1-2', parentVal: '1' },
        { text: '2-1', value: '2-1', parentVal: '2' },
        { text: '2-2', value: '2-2', parentVal: '2' },
        { text: '3-1', value: '3-1', parentVal: '3' }
      ]
    }];

3.新增選擇器到你的html模板。

    < ion -item >
        < ion -label > Simple Picker </ ion -label >
        < ion -  multi -picker item-content [ multiPickerColumns ] = “ simpleColumns ” > </ ion -multi-picker >
    </ ion -item >