您的位置：首页 > 移动开发 > IOS开发

angular使用iosSelect插件实现城市选择

2018-01-09 17:09 766 查看
因为使用angular写一个webapp页面,里面有城市选择,为了简单一点直接使用了
IOSSelect
插件.

起步

npm

npm install iosselect


下载文件

点击下载文件到项目目录中，在HTML文件中插入以下代码，并按需调整路径。

<link rel="stylesheet" href="/static/css/iosSelect.css">

<script type="text/javascript" src="/static/js/iosSelect.js"></script>


当我们把插件文件引入后我们便可以在我们的代码中使用这个插件了,由于官方demo给的是js版本的,所以我们在angular文件中使用时需要改造一下

在组件中使用插件时首先我们需要
declare
(声明)一下

declare let IosSelect: any;


这里需要注意一下
declare
必须放在
@Component
之前,否则会报错

然后我们通过ElementRef和Renderer2来进行元素的操作,不了解ElementRef和Renderer2的朋友可以查看这篇博客

angular修仙之路

我们通过一个事件调用插件中的方法

app.component.ts


import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
import { CityService } from './city.service';

declare let IosSelect: any;
@Component({
selector: 'app-user-add',
templateUrl: './user-add.component.html',
styleUrls: ['./user-add.component.scss'],
})

export class UserAddComponent implements OnInit {
address: any;
oneId: any;
twoId: any;
cities: any;

constructor(
private elem: ElementRef,
private rend: Renderer2,
public cityService: CityService
) {
this.address = "北京市 北京市 东城区";
}

ngOnInit() {
this.cityService.getCity()
.then(res => {
console.log(res);
this.cities = res;
})
}

clickEvent() {
let sccode =
this.elem.nativeElement.q
4000
uerySelector('#show_contact')
.getAttribute('data-city-code');
let scname =
this.elem.nativeElement.querySelector('#show_contact')
.getAttribute('data-city-name');
let oneLevelId =
this.elem.nativeElement.querySelector('#show_contact')
.getAttribute('data-province-code');
let twoLevelId =
this.elem.nativeElement.querySelector('#show_contact')
.getAttribute('data-city-code');
let threeLevelId =
this.elem.nativeElement.querySelector('#show_contact')
.getAttribute('data-district-code');

let el = this.elem; //这里需要将this作保留,否则this将指向这个对象的实例
let self = this;
let iosSelect = new IosSelect(3,
[self.cities.iosProvinces, self.cities.iosCitys, self.cities.iosCountys],
{
title: '地址选择',
itemHeight: 35,
relation: [1, 1, 0, 0],
oneLevelId: oneLevelId,
twoLevelId: twoLevelId,
threeLevelId: threeLevelId,

callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
self.oneId = selectOneObj.id; //这里的this指向发生了变化
el.nativeElement.querySelector('#contact_province_code')
.setAttribute('data-province-name', selectOneObj.value);
self.twoId = selectTwoObj.id;
el.nativeElement.querySelector('#contact_city_code')
.setAttribute('data-city-name', selectTwoObj.value);

el.nativeElement.querySelector('#show_contact')
.setAttribute('data-province-code', selectOneObj.id);
el.nativeElement.querySelector('#show_contact')
.setAttribute('data-city-code', selectTwoObj.id);
el.nativeElement.querySelector('#show_contact')
.setAttribute('data-district-code', selectThreeObj.id);
self.address =
selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;
}
});
}


app.component.html


<p id="select_contact" (click)="clickEvent()">
<label>所在区域</label>
<input type="hidden"
name="contact_province_code"
data-id="0001"
id="contact_province_code"
value="{{oneId}}" data-province-name="">
<input type="hidden"
name="contact_city_code"
id="contact_city_code"
value="{{twoId}}" data-city-name="">
<span data-city-code="110100"  //绑定的默认值
data-province-code="110000"
data-district-code="110101"
id="show_contact">{{address}}</span>
</p>


app.service.ts


import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class CityService {
constructor(public http: Http) { }

getCity() {
const url = 'assets/select/cityData.json';
return this.http.get(url)
.toPromise()
.then(res => res.json())
.catch(this.handleError);
}

public handleError(error: any) {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}


关于使用npm引入iosselect的一些问题

首先使用
npm install --save iosselect
创建文件,这里是发布时用到的包,所有不要使用
npm install --save-dev iosselect
来创建

然后我们导入
import IosSelect from 'iosselect';
注意这里没有使用
{IosSelect}
,当一个文件导出多个对象时就需要使用
{}
,而这里导入的是一个
default
对象,具体的可以看一下
import
和
export
文档,其他地方不需要改动

当angular中使用
{IosSelect}
引入时会报错

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_iosselect__.IosSelect is not a constructor
at UserAddComponent.webpackJsonp.../../../../../src/app/store/user-add/user-add.component.ts.UserAddComponent.clickEvent (user-add.component.ts:47)




这个时候城市选择功能是可以使用的,但是没有样式,因为我们的样式还没有导入,使用
@import "~iosselect/src/iosSelect.css";
导入
css
文件,到此我们使用npm变完成了

数据和插件文件http://pan.baidu.com/s/1cbIRFK
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航