import {Component, OnInit, Output, 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", "JSONP_CALLBACK");
    this.httpServer.jsonpGet(url, 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后台路由文件

脚本宝典总结

以上是脚本宝典为你收集整理的angular2省市县三级联动，封装组件，使用@Output()传递给父组件全部内容，希望文章能够帮你解决angular2省市县三级联动，封装组件，使用@Output()传递给父组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。