本文主要介紹了Angular4自製一個市縣二級連動組件範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
最近遇到了不少問題，真的是命運多舛。 Angular真是讓人又愛又恨的框架，恨的是資料太少，遇到問題無從下手。愛的是許多其他框架難以做到的功能，angular可以輕鬆做到。
話不多說，最近遇到了一個舊專案改造的問題。拿到前同事做的頁面效果：
第一眼就看到了這三個下拉框，按捺不住好奇心的我點了點。原來，第一個下拉框可以選擇市屬和省級，如果選擇市屬，那麼後面就會出現市、縣級兩個下拉框，如果是省級，那就隱藏了，這個挺容易的。然後就是要選擇城市之後，區下拉框要有對應區縣選項。 emmmm，很典型的二級連動，不過既然分析完了思路，那就開始做吧！首先呢，資料一定要從後端同事那裡拿，呼叫他的介面把資料填進去。看看資料是什麼樣子的：
資料略多，就不全部貼出來了。把實體bean創建一下，
// 市级实体类
export class City {
// 市级id
cityId: string;
// 所属类型(0.市属 1.省属)
cityType: number;
// 市级名称(可选属性，若cityType为1时，可不填)
cityName: string;
// 所属区县
counties?: Array<Country>;
}
// 区县级实体类
export class Country {
// 区县id
countryId: string;
// 区县名称
countryName: string;
}
// 填写市县类
export class CityAndCountry {
// 市级id
cityId: string;
// 县级id
countryId: string;
// 市级类型
cityType: number;
// 市县级实体构造器
constructor() {
// 给市级id赋予一个真实城市的id初始值
this.cityId = '***';
// 同上
this.countryId = '***';
// 同上
this.cityType = 0;
}
}登入後複製
實體完成了，開始準備取得資料並填入實體：
##
// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy {
// 结果码 (用于页面处理显示标识)
result_code: number;
// 市级实体声明
city: City[];
// 县区级实体声明
country: Country[];
// 市县、区级填写实体声明
cac: CityAndCountry;
// 声明订阅对象
subscript: Subscription;
/**
* 构造器
* @param {CityService} service 注入服务
*/
constructor (private service: CityService) {
// 结果码 (-1.网络或其他异常 0.无内容 1.请求成功 2.请等待)
this.result_code = 2;
// 初始化填写市区、县级填写实体
cac = new CityAndCountry();
// 初始化数组(这步很重要，有很多人说使用数组相关函数会报未定义异常，是因为没有初始化的原因)
this.city = [];
this.country = [];
// 初始化订阅对象
this.subscript = new Subscription();
}
/**
* 生命周期初始化钩子(生命周期尽量按执行顺序来写，养成好习惯)
*/
ngOnInit(): void {
this.getCityArea();
}
/** 获取市县数据 */
getCityArea() {
/** 将请求交付服务处理(service代码比较简单，就不贴了) */
this.subscript = this.service.getCityArea().subscribe(res => {
/** 获取json请求结果 */
const result = res.json();
/** 判断结果返回码 */
switch (result['code']) {
/** 请求成功，并且有值 */
case 200:
/** 改变初始返回码 */
this.result_code = 1;
/** 获取并填充数据 */
this.city = json['city'];
break;
/** 其他情况不重复赘述 */
}
}, err => {
/** 显示预设异常信息提示给用户 */
this.result_code = -1;
/** 打印log，尽量使用日志产出 */
console.error(err);
});
}
/** 生命周期销毁钩子 */
ngOnDestroy(): void {
/** 取消订阅 */
this.subscript.unsubscribe();
}
}登入後複製
由於這裡是單服務請求，為了讓程式碼比較清晰直觀，這裡我就不做封裝處理了。數據獲取了之後就該填充到展示界面了：
<!-- 所属类型(此处固定，一般为获取后端数据字典数据) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
<!-- 所传内容为整数型 -->
<option value=0>市属</option>
<option value=1>省属</option>
</select>
<!-- 市级选择(类型为省属时隐藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
<!-- 遍历城市数组 -->
<option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>登入後複製
這時候，我們發現縣級獲取起來好像並不能直接獲取，怎麼辦呢？我突然想到，我在ts裡面聲明一個變數取得市級選擇的id號，然後再拿id去找下屬縣區，這樣就可以輕鬆拿到了。既然要即時取得變化，那我們就實作偵測變化鉤子：
// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
// 声明县区级数组
country: Array<Country>;
constructor() {
/** 重复代码不赘述 */
/** 初始化数组 */
country = [];
}
/** 生命周期检测变化钩子 */
ngDoCheck(): void {
/** 遍历市级数组 */
for (let i = 0; i < this.city.length; i++) {
/** 若选择的市级id和市级数组中的id相吻合 */
if (this.city[i].id == this.cac.countryId) {
/** 将该索引下的counties数组赋予给区县级数组 */
this.country = this.city[i].counties;
}
/** 我们无法避免直辖市的情况，所以多一重判断 */
if (this.country.length > 0) {
/** 为了用户体验，我们要尽量在用户选择市级城市后，默认选择一个区县级城市 */
this.cac.country.id = this.country[0].id;
}
}
}
}登入後複製
最後再補上區縣級下拉方塊：
#
<!-- 区县级下拉框 -->
<select [value]="cac.countryId" [(ngModel)]="cac.countryId" *ngIf="cac.cityType==0 && country.length > 0">
<option *ngFor="let count of country" [value]="count.id">{{count.name}}</option>
</select>登入後複製
到此為止，大功告成，再也不用去依賴別人的函式庫了。
相關推薦：
Ajax結合php實作二級連動實例方法
js實作HTML中Select二級連動實例分享
AngularJS實作的省市二級連動功能範例
以上是Angular4自製一個市縣二級連動組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
