ionic3 地区选择器

以前看ionic2文档的时候在网上搜索发现了一款 某大神开发的 地区选择插件，并且支持联动 升级ionic3后 本来害怕不支持3，又看了文档发现这位大神紧跟官方文档实时更新。。敬佩。。。

并且这款插件使用非常简单。和官方提供的原生组件类似。

原文地址链接：https://github.com/raychenfj/ion-multi-picker

演示

查看现场演示：https：//raychenfj.github.io/ion-multi-picker/

支持版本

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 >