├── README.md ├── province.js ├── city.js ├── country.js ├── http.server.ts ├── three-link.component.html ├── add_user_info.js ├── three-link.component.ts ├── username.component.html └── username.component.ts /README.md: -------------------------------------------------------------------------------- 1 | # ng2-output-sanjiliandong 2 | angular2三级联动，定义省市县三级联动组件，在需要的地方调用即可，使用@Output父组件获取子组件的值 3 | -------------------------------------------------------------------------------- /province.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var router = express.Router(); 3 | var connection = require("../conf/db"); 4 | 5 | router.get("/", function (req, res, next) { 6 | connection("select * from province", function (err, rows, fields) { 7 | console.log(rows); 8 | res.jsonp(rows); 9 | }) 10 | }); 11 | module.exports = router; -------------------------------------------------------------------------------- /city.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var router = express.Router(); 3 | var connection = require("../conf/db"); 4 | 5 | router.get("/", function (req, res, next) { 6 | var proId = req.query.ProID; 7 | connection("select * from city where ProID='" + proId + "'", function (err, rows, fields) { 8 | console.log(rows); 9 | res.jsonp(rows); 10 | }) 11 | }); 12 | module.exports = router; -------------------------------------------------------------------------------- /country.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var router = express.Router(); 3 | var connecion = require("../conf/db"); 4 | 5 | router.get("/", function (req, res, next) { 6 | var CityID = req.query.CityID; 7 | connecion("select * from country where CityID = '" + CityID + "'", function (err, rows, fields) { 8 | console.log(rows); 9 | res.jsonp(rows); 10 | }) 11 | }); 12 | 13 | module.exports = router; -------------------------------------------------------------------------------- /http.server.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "@angular/core"; 2 | import {Http, Jsonp} from "@angular/http"; 3 | import "rxjs/add/operator/map"; 4 | @Injectable() 5 | export class HttpServer { 6 | constructor(public http:Http, public jsonp:Jsonp) { 7 | 8 | } 9 | 10 | httpGet(url, params) { 11 | return this.http.get(url, {search: params}).map(result=>result.json()); 12 | } 13 | 14 | httpPost(url, params) { 15 | return this.http.post(url, {search: params}).map(result=>result.json()); 16 | } 17 | 18 | jsonpGet(url, params) { 19 | return this.jsonp.get(url, {search: params}).map(result=>result.json()); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /three-link.component.html: -------------------------------------------------------------------------------- 1 |

2 | 6 |

7 |

8 | 12 |

13 |

14 | 18 |

19 | -------------------------------------------------------------------------------- /add_user_info.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var router = express.Router(); 3 | // 数据库 4 | var connection = require("../conf/db"); 5 | router.get("/", function (req, res, next) { 6 | var username = req.query.username; 7 | var sex = req.query.sex; 8 | var age = req.query.age; 9 | var address = req.query.address; 10 | var position = req.query.position; 11 | var hobby = req.query.hobby; 12 | var remark = req.query.remark; 13 | var province = req.query.province; 14 | var city = req.query.city; 15 | var country = req.query.country; 16 | 17 | connection("update users set province='" + province + "', city='" + city + "', country='" + country + "', sex='" + sex + "', age='" + age + "', address='" + address + "', position='" + position + "', hobby='" + hobby + "', remark='" + remark + "' where username='" + username + "'", function (err, rows, field) { 18 | console.log(rows); 19 | res.jsonp(rows); 20 | }) 21 | 22 | }); 23 | module.exports = router; -------------------------------------------------------------------------------- /three-link.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit, Output, EventEmitter} from "@angular/core"; 2 | import {URLSearchParams} from "@angular/http"; 3 | import {HttpServer} from "../servers/http.server"; 4 | @Component({ 5 | selector: "three-link", 6 | templateUrl: "../templates/three-link.component.html" 7 | }) 8 | export class ThreeLinkComponent implements OnInit { 9 | 10 | // 输出一下参数 11 | @Output() provinceOut = new EventEmitter(); 12 | @Output() cityOut = new EventEmitter(); 13 | @Output() countryOut = new EventEmitter(); 14 | 15 | province:string; 16 | city:string; 17 | country:string; 18 | provinceData:Array; 19 | cityData:Array; 20 | countryData:Array; 21 | 22 | constructor(public httpServer:HttpServer) { 23 | // 设置省市县的默认值, 显示请选择, 要不然会有一个问题(选择省份的时候,市改变了,但是县没有变) 24 | this.province = "-1"; 25 | this.city = "-1"; 26 | this.country = "-1"; 27 | this.provinceData = []; 28 | this.cityData = []; 29 | this.countryData = []; 30 | } 31 | 32 | // 选择省份 33 | ngOnInit() { 34 | // 初始化省市县 35 | var url = "http://localhost:3000/province"; 36 | var params = new URLSearchParams(); 37 | params.set("callback", "JSONP_CALLBACK"); 38 | 39 | this.httpServer.jsonpGet(url, params).subscribe(res=> { 40 | console.log(res); 41 | this.provinceData = res; 42 | }); 43 | this.provinceChange(); 44 | this.cityChange(); 45 | this.countryChange(); 46 | } 47 | 48 | // 选择省份, 查询相应的市 49 | provinceChange() { 50 | // 选择省份的时候发射省份给父组件 51 | this.provinceOut.emit(this.province); 52 | 53 | var url = "http://localhost:3000/city"; 54 | var params = new URLSearchParams(); 55 | params.set("ProID", this.province); 56 | params.set("callback", "JSONP_CALLBACK"); 57 | this.httpServer.jsonpGet(url, params).subscribe(res=> { 58 | console.log(res); 59 | this.cityData = res; 60 | }); 61 | this.countryData = []; 62 | } 63 | 64 | // 选择市, 查询相应的县 65 | cityChange() { 66 | // 选择市的时候发射市给父组件 67 | this.cityOut.emit(this.city); 68 | 69 | var url = "http://localhost:3000/country"; 70 | var params = new URLSearchParams(); 71 | params.set("CityID", this.city); 72 | params.set("callback", "JSONP_CALLBACK"); 73 | this.httpServer.jsonpGet(url, params).subscribe(res=> { 74 | console.log(res); 75 | this.countryData = res; 76 | }); 77 | } 78 | 79 | // 选择市的时候发射县给父组件 80 | countryChange() { 81 | this.countryOut.emit(this.country); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /username.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 我的信息 完善资料 6 | 7 |
8 |
    9 |
  • 性别: {{item.sex}}
    • 10 |
  • 年龄: {{item.age}}
    • 11 |
  • 职务: {{item.position}}
    • 12 |
  • 地址: {{item.address}}
    • 13 |
  • 爱好: {{item.hobby}}
    • 14 |
  • 省份: {{item.province}}
    • 15 |
  • 市: {{item.city}}
    • 16 |
  • 区县: {{item.country}}
    • 17 |
  • 18 | 备注: 19 |
    20 |
    21 |
    • 22 |
23 |
24 | 25 | 78 | 79 |
80 | -------------------------------------------------------------------------------- /username.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit} from "@angular/core"; 2 | import {HttpServer} from "../servers/http.server"; 3 | import {URLSearchParams} from "@angular/http"; 4 | import {Router} from "@angular/router"; 5 | 6 | @Component({ 7 | selector: "sport-username", 8 | templateUrl: "../templates/username.component.html" 9 | }) 10 | export class UsernameComponent { 11 | data:Array; 12 | // 编辑器内容 13 | editorContent:string; 14 | ckeditorContent:string; 15 | 16 | sex:string; 17 | age:string; 18 | address:string; 19 | position:string; 20 | hobby:string; 21 | message:string; 22 | // 配置编辑器 23 | editorConfig:Object; 24 | 25 | // 这几个变量是从子组件,专门定义了三级联动的子组件总获取的 @Output() 26 | province: string; 27 | city: string; 28 | country: string; 29 | 30 | constructor(public httpServer:HttpServer, public router:Router) { 31 | this.message = ""; 32 | this.editorContent = ""; 33 | this.ckeditorContent = ""; 34 | this.sex = "男"; 35 | this.age = ""; 36 | this.address = ""; 37 | this.position = ""; 38 | this.hobby = ""; 39 | 40 | this.province = "1"; 41 | this.city = "1"; 42 | this.country = "1"; 43 | 44 | this.editorConfig = { 45 | placeholder: "备注" 46 | } 47 | } 48 | 49 | ngOnInit() { 50 | var url = "http://localhost:3000/select_user_info"; 51 | var params = new URLSearchParams(); 52 | params.set("username", sessionStorage.getItem("username")); 53 | params.set("callback", "JSONP_CALLBACK"); 54 | this.httpServer.jsonpGet(url, params).subscribe(res=> { 55 | console.log(res); 56 | this.data = res; 57 | // 修改的时候的初始值 58 | this.editorContent = res[0].remark; 59 | // 其实都要验证, 不为null的时候才给赋值,就是单机编辑资料的时候,给输入框赋填写的值 60 | if (res[0].sex != null) { 61 | this.sex = res[0].sex; 62 | } 63 | this.age = res[0].age; 64 | this.address = res[0].address; 65 | this.position = res[0].position; 66 | this.hobby = res[0].hobby; 67 | this.province = res[0].province; 68 | this.city = res[0].city; 69 | this.country = res[0].country; 70 | }); 71 | } 72 | 73 | // 当改变输入框内容的时候触发 74 | onContentChanged({html, text}) { 75 | console.log(html, text); 76 | this.editorContent = html; 77 | } 78 | 79 | // 函数接受子函数传递过来的变量 80 | recPro(event) { 81 | this.province = event; 82 | } 83 | recCity(event) { 84 | this.city = event; 85 | } 86 | recCou(event) { 87 | this.country = event; 88 | } 89 | 90 | editorHandel() { 91 | var url = "http://localhost:3000/add_user_info"; 92 | var params = new URLSearchParams(); 93 | params.set("sex", this.sex); 94 | params.set("age", this.age); 95 | params.set("address", this.address); 96 | params.set("position", this.position); 97 | params.set("hobby", this.hobby); 98 | params.set("remark", this.editorContent); 99 | params.set("callback", "JSONP_CALLBACK"); 100 | params.set("username", sessionStorage.getItem("username")); 101 | 102 | params.set("province", this.province); 103 | params.set("city", this.city); 104 | params.set("country", this.country); 105 | 106 | this.httpServer.jsonpGet(url, params).subscribe(res=> { 107 | console.log(res); 108 | if (res.affectedRows > 0) { 109 | // this.router.navigateByUrl("user"); 110 | this.message = ""; 111 | window.location.reload(); 112 | } 113 | else { 114 | this.message = "修改信息失败"; 115 | } 116 | }); 117 | } 118 | } 119 | --------------------------------------------------------------------------------