angular2省市县三级联动，封装组件，使用@Output()传递给父组件

再讲之前先讲一下父组件获取子组件的数据@Output()

A: 子组件需要做的工作

1. 引入Output和EventEmitter

import {Component,OnInit,Output,EventEmitter} from "@angular/core";

2. 定义输出方法，provinceOut将在父组件中使用子组件标签的时候调用（后解）

@Output() provinceOut = new EventEmitter();

3. 单机模板中绑定的事件的时候发射变量到父组件 

provinceChange() {
    // 选择省份的时候发射省份给父组件
    this.provinceOut.emit(this.province);
}

B: 父组件要做的工作

1. 父组件模板中，调用子组件标签，绑定子组件中output的事件

<child-page (provinceOut)="recPro($event)"></child-page>
(provinceOut：子组件中@Output()定义的变量,recPro(#event)父组件中定义一个函数，调用这个函数，获取子组件传递过来的数据)

2. 父组件

// 函数接受子函数传递过来的变量
recPro(event) {
  this.province = event;
}

下面开始讲解三级联动组件，省市县数据使用node(express)提供，使用jsonp跨域获取数据，后端代码就不多说了，简单的增删改查

1、子组件 three-link.component.ts

import {Component,EventEmitter} from "@angular/core";
import {URLSearchParams} from "@angular/http";
import {HttpServer} from "../servers/http.server";
@Component({
  selector: "three-link",templateUrl: "../templates/three-link.component.html"
})
export class ThreeLinkComponent implements OnInit {

  // 输出以下参数
  @Output() provinceOut = new EventEmitter();
  @Output() cityOut = new EventEmitter();
  @Output() countryOut = new EventEmitter();

  province:string;
  city:string;
  country:string;
  provinceData:Array<Object>;
  cityData:Array<Object>;
  countryData:Array<Object>;

  constructor(public httpServer:HttpServer) {
    // 设置省市县的默认值,显示请选择,要不然会有一个问题(选择省份的时候,市改变了,但是县没有变)
    this.province = "-1";
    this.city = "-1";
    this.country = "-1";
    this.provinceData = [];
    this.cityData = [];
    this.countryData = [];
  }

  // 选择省份
  ngOnInit() {
    // 初始化省市县
    var url = "http://localhost:3000/province";
    var params = new URLSearchParams();
    params.set("callback","JSONP_CALLBACK");

    this.httpServer.jsonpGet(url,params).subscribe(res=> {
      console.log(res);
      this.provinceData = res;
    });
    this.provinceChange();
    this.cityChange();
    this.countryChange();
  }

  // 选择省份,查询相应的市
  provinceChange() {
    // 选择省份的时候发射省份给父组件
    this.provinceOut.emit(this.province);

    var url = "http://localhost:3000/city";
    var params = new URLSearchParams();
    params.set("ProID",this.province);
    params.set("callback","JSONP_CALLBACK");
    this.httpServer.jsonpGet(url,params).subscribe(res=> {
      console.log(res);
      this.cityData = res;
    });
    this.countryData = [];
  }

  // 选择市,查询相应的县
  cityChange() {
    // 选择市的时候发射市给父组件
    this.cityOut.emit(this.city);

    var url = "http://localhost:3000/country";
    var params = new URLSearchParams();
    params.set("CityID",this.city);
    params.set("callback",params).subscribe(res=> {
      console.log(res);
      this.countryData = res;
    });
  }

  // 选择市的时候发射县给父组件
  countryChange() {
    this.countryOut.emit(this.country);
  }
}

2、子模板 three-link.component.html

<p>
  <select name="province" [(ngModel)]="province" class="form-control" (change)="provinceChange()">
    <option value="-1">--请选择省份--</option>
    <option *ngFor="let item of provinceData" value="{{item.ProID}}">{{item.name}}</option>
  </select>
</p>
<p>
  <select name="province" [(ngModel)]="city" class="form-control" (change)="cityChange()">
    <option value="-1">--请选择市--</option>
    <option *ngFor="let item of cityData" value="{{item.CityID}}">{{item.name}}</option>
  </select>
</p>
<p>
  <select name="province" [(ngModel)]="country" class="form-control" (change)="countryChange()">
    <option value="-1">--请选择区县--</option>
    <option *ngFor="let item of countryData" value="{{item.Id}}">{{item.name}}</option>
  </select>
</p>

3、父模板

<!--三级联动组件-->
<three-link (provinceOut)="recPro($event)"
            (cityOut)="recCity($event)"
            (countryOut)="recCou($event)"
></three-link>

4、父组件

...
// 函数接受子函数传递过来的变量
  recPro(event) {
    this.province = event;
  }
  recCity(event) {
    this.city = event;
  }
  recCou(event) {
    this.country = event;
  }
...

5、获取数据的服务

import {Injectable} from "@angular/core";
import {Http,Jsonp} from "@angular/http";
import "rxjs/add/operator/map";
@Injectable()
export class HttpServer {
  constructor(public http:Http,public jsonp:Jsonp) {

  }

  httpGet(url,params) {
    return this.http.get(url,{search: params}).map(result=>result.json());
  }

  httpPost(url,params) {
    return this.http.post(url,{search: params}).map(result=>result.json());
  }

  jsonpGet(url,params) {
    return this.jsonp.get(url,{search: params}).map(result=>result.json());
  }
}

核心就是：定义省市县的组件，然后在需要用到的地方直接使用组件标签，调用，但是父界面肯定需要获取子组件提供的省市县的值，所以要使用@Output()将子组件的值传递给父组件。

文件查看地址：https://github.com/zxc1989092...包含核心文件，和express后台路由文件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!