省市区三级联动组件 material angular2

前言

最近在写一个项目，其中用到省市区的三级联动组件。起初，由于时间紧凑，使用的是第三方的一个联动组件。但是，回过头来发现，整个组件的风格与整个网站的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