前言
最近在写一个项目，其中用到省市区的三级联动组件。起初，由于时间紧凑，使用的是第三方的一个联动组件。但是，回过头来发现，整个组件的风格与整个网站的material风格不相符合，心里难受，就自己动手写了这么一个组件，该组件是建立在Google的angular material2的基础之上进行编写的，下面我将记录编写的整个流程。
组件效果图
效果图
组件分析
1.需要配置@angular/material，配置的问题本文不做具体的讲述，可以访问下面的链接进行配置点击此处（需要翻X）
组件会使用到angular material中的MdSelectModule，所以需要导入MdSelectModule
2.省市区数据的来源，其实网上有许多json的数据源，而且这些数据源大致都是雷同的，所以我就直接从网上扒下一组比较好处理的json数据源，数据源放在我的服务器上数据源(直接访问的话，可能浏览器编码需要改一下，也可以直接去浏览器后台抓取文件)
3.数据搞定之后，就来看一下组件的代码部分
- three-link.service.ts代码部分
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
const ThreeLinkUrl = 'src/mock-data/three-link.json';
@Injectable()
export class ThreeLinkService {
constructor(public _http: Http) {
}
public setAll() { //获取json中的数据
return this._http.get(ThreeLinkUrl)
.map((response: Response) => {
const res = response.json();
return res;
})
.catch((error: any) => Observable.throw('Server error' || error));
}
}
这里我请求了存放在mock-data文件夹中的three-link.json文件，使用的是rxjs的方法。之后的component中将调用服务的setAll()函数
- three-link.component.ts代码部分
mport {Component, OnInit} from '@angular/core';
import {ThreeLinkService} from './three-link.service';
@Component({
selector: 'app-three-link',
templateUrl: './three-link.html',
styleUrls: ['./three-link.css']
})
export class ThreeLinkComponent implements OnInit {
public all: Array<object>; //存储所有的省市区数据
public provinces: Array<object>; //存储省的信息
public citys: Array<object>; //存储城市的信息
public areas: Array<object>; //存储地区的信息
public cityValue: string; //重置城市选择器时用到的变量
public areaValue: string; //重置地区选择器时用到的变量
constructor(public threeLinkService: ThreeLinkService) {
}
ngOnInit() {
this.setAll();
}
private setAll() {
this.threeLinkService.setAll()
.subscribe(
data => {
this.all = data;
this.provinces = this.setProvinces();
},
error => {
console.log(error);
}
);
}
private setProvinces() {
if (this.all !== undefined ) {
const result = new Array<object>();
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'].slice(2, 6) === '0000') {
result.push(value);
}
}
return result;
}
}
private setCity(province: string) {
if (this.all !== undefined) {
const result = new Array();
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'].slice(0, 2) === province.slice(0, 2)
&& value['item_code'] !== province && value['item_code'].slice(4, 6) === '00') {
result.push(value);
}
}
return result;
}
}
private setArea(city: string) {
if (this.all !== undefined) {
const result = [];
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'] !== city && value['item_code'].slice(0, 4) === city.slice(0, 4)) {
result.push(value);
}
}
return result;
}
}
public selectProvince(code: string) {
this.cityValue = 'undefined';
this.areaValue = 'undefined';
this.citys = this.setCity(code);
}
public selectCity(code: string) {
this.areaValue = 'undefined';
this.areas = this.setArea(code);
}
}
整个代码段没必要全部看完，我们可以分成3个部分来进行分析
1.第一部分（初始化省信息部分）
private setAll() {
this.threeLinkService.setAll()
.subscribe(
data => {
this.all = data; //将获取的json数据赋值给all数组
this.provinces = this.setProvinces(); //筛选all数组中所有符合省代码的省信息
},
error => {
console.log(error);
}
);
}
private setProvinces() {
if (this.all !== undefined ) {
const result = new Array<object>();
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'].slice(2, 6) === '0000') { //筛选后4位都为0000的json数据
result.push(value);
}
}
return result;
}
}
其中setAll()函数是将threeLinkService中的setAll()返回的数据进行处理，然后将数据赋值给all数组，同时使用setProvince()函数对provinces数组进行赋值。
2.第二部分（根据选择的省信息，获取城市信息）
private setCity(province: string) {
if (this.all !== undefined) {
const result = new Array();
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'].slice(0, 2) === province.slice(0, 2)
&& value['item_code'] !== province && value['item_code'].slice(4, 6) === '00') { //选择前两位与省代码一样的城市代码，并且后两位为00的数据源
result.push(value);
}
}
return result;
}
}
public selectProvince(code: string) {
this.cityValue = 'undefined'; //重置城市选择器
this.areaValue = 'undefined'; //重置地区选择器
this.citys = this.setCity(code);
}
由于整个json数据部分的结构，如下：
{"item_code":"110000","item_name":"北京市"},
{"item_code":"120000","item_name":"天津市"},
{"item_code":"130000","item_name":"河北省"},
{"item_code":"140000","item_name":"山西省"},
所以，我们可以根据字符串的前两位来判断所选择的省，然后获取城市的信息。selectProvince()是一个响应函数，在每次重新选择省时，都需要重置城市选择器和地区选择器。
3.第三部分（根据城市信息，获取地区信息）
private setArea(city: string) {
if (this.all !== undefined) {
const result = [];
for (let i = 0; i < this.all.length; i++) {
const value = this.all[i];
if (value['item_code'] !== city && value['item_code'].slice(0, 4) === city.slice(0, 4)) {
result.push(value);
}
}
return result;
}
}
public selectCity(code: string) {
this.areaValue = 'undefined'; //每次选择城市的同时，都重置地区选择器
this.areas = this.setArea(code);
}
地区数据的选择与城市数据的选择一样，都是根据城市的唯一代码进行匹配，将所有匹配的地区数据放入areas数组中
- html代码部分
<md-select placeholder="请选择省份" >
<md-option *ngFor="let province of provinces" [value]="province.item_code" (click)="selectProvince(province.item_code);">
{{province.item_name}}
</md-option>
</md-select>
<md-select placeholder="请选择城市" [(ngModel)]="cityValue">
<md-option *ngFor="let city of citys" [value]="city.item_code" (click)="selectCity(city.item_code);">
{{city.item_name}}
</md-option>
</md-select>
<md-select placeholder="请选择地区" [(ngModel)]="areaValue">
<md-option *ngFor="let area of areas" [value]="area.item_code">
{{area.item_name}}
</md-option>
</md-select>
省选择器的点击事件就是selectProvince(province.item_code)函数，这函数可以筛选出后续的城市信息，重点要强调的是城市选择器和地区选择器中的[(ngModel)]，由于每次重新选择前面一个选择器时，都需要将后面的选择器进行重置，所以这里使用数据的双向绑定的方法，进行选择器的重置，只要将其中的值置为undefined，就可以使选择器重置。
这个组件的原理大致就是这样子，写的有点粗糙，原理可能有些没讲透，希望读者可以给我留言或者提问
注：这篇博文属于原创博文，如果有问题的可以给我留言，转载注明出处。
