最近遇到了不少問題，真的是命運(yùn)多舛。Angular真是讓人又愛又恨的框架，恨的是資料太少，遇到問題無從下手。愛的是許多其他框架難以做到的功能，angular卻可以輕松做到。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),普陀企業(yè)網(wǎng)站建設(shè),普陀品牌網(wǎng)站建設(shè),網(wǎng)站定制,普陀網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,普陀網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
話不多說，最近遇到了一個舊項目改造的問題。拿到前同事做的頁面效果：
第一眼就看到了這三個下拉框，按捺不住好奇心的我點(diǎn)了點(diǎn)。原來，第一個下拉框可以選擇市屬和省屬，如果選擇市屬，那么后面就會出現(xiàn)市、縣級兩個下拉框，如果是省屬，那就隱藏了，這個挺容易的。然后就是要選擇市之后，區(qū)下拉框要有對應(yīng)區(qū)縣選項。emmmm，很典型的二級聯(lián)動，不過既然分析完了思路，那就開始做吧！首先呢，數(shù)據(jù)肯定要從后端同事那里拿，調(diào)用他的接口把數(shù)據(jù)填充進(jìn)去?？纯磾?shù)據(jù)是什么樣子的：
數(shù)據(jù)略多，就不全部貼出來了。把實體bean創(chuàng)建一下，
重慶分公司
重慶分公司
// 市級實體類
export class City {
// 市級id
cityId: string;
// 所屬類型(0.市屬 1.省屬)
cityType: number;
// 市級名稱(可選屬性，若cityType為1時，可不填)
cityName: string;
// 所屬區(qū)縣
counties?: Array;
}
// 區(qū)縣級實體類
export class Country {
// 區(qū)縣id
countryId: string;
// 區(qū)縣名稱
countryName: string;
}
// 填寫市縣類
export class CityAndCountry {
// 市級id
cityId: string;
// 縣級id
countryId: string;
// 市級類型
cityType: number;
// 市縣級實體構(gòu)造器
constructor() {
// 給市級id賦予一個真實城市的id初始值
this.cityId = '***';
// 同上
this.countryId = '***';
// 同上
this.cityType = 0;
}
}
實體完成了，開始準(zhǔn)備獲取數(shù)據(jù)并填充至實體：
// 二級聯(lián)動組件
export class CityAreaComponent implements OnInit, OnDestroy {
// 結(jié)果碼 (用于頁面處理顯示標(biāo)識)
result_code: number;
// 市級實體聲明
city: City[];
// 縣區(qū)級實體聲明
country: Country[];
// 市縣、區(qū)級填寫實體聲明
cac: CityAndCountry;
// 聲明訂閱對象
subscript: Subscription;
/**
* 構(gòu)造器
* @param {CityService} service 注入服務(wù)
*/
constructor (private service: CityService) {
// 結(jié)果碼 (-1.網(wǎng)絡(luò)或其他異常 0.無內(nèi)容 1.請求成功 2.請等待)
this.result_code = 2;
// 初始化填寫市區(qū)、縣級填寫實體
cac = new CityAndCountry();
// 初始化數(shù)組(這步很重要，有很多人說使用數(shù)組相關(guān)函數(shù)會報未定義異常，是因為沒有初始化的原因)
this.city = [];
this.country = [];
// 初始化訂閱對象
this.subscript = new Subscription();
}
/**
* 生命周期初始化鉤子(生命周期盡量按執(zhí)行順序來寫，養(yǎng)成好習(xí)慣)
*/
ngOnInit(): void {
this.getCityArea();
}
/** 獲取市縣數(shù)據(jù) */
getCityArea() {
/** 將請求交付服務(wù)處理(service代碼比較簡單，就不貼了) */
this.subscript = this.service.getCityArea().subscribe(res => {
/** 獲取json請求結(jié)果 */
const result = res.json();
/** 判斷結(jié)果返回碼 */
switch (result['code']) {
/** 請求成功，并且有值 */
case 200:
/** 改變初始返回碼 */
this.result_code = 1;
/** 獲取并填充數(shù)據(jù) */
this.city = json['city'];
break;
/** 其他情況不重復(fù)贅述 */
}
}, err => {
/** 顯示預(yù)設(shè)異常信息提示給用戶 */
this.result_code = -1;
/** 打印log，盡量使用日志產(chǎn)出 */
console.error(err);
});
}
/** 生命周期銷毀鉤子 */
ngOnDestroy(): void {
/** 取消訂閱 */
this.subscript.unsubscribe();
}
}
由于此處是單服務(wù)請求，為了讓代碼比較清晰直觀，這里我就不做封裝處理了。數(shù)據(jù)獲取了之后就該填充到展示界面了：
這時候，我們發(fā)現(xiàn)縣級獲取起來好像并不能直接獲取，怎么辦呢？我突然想到，我在ts里面聲明一個變量獲取市級選擇的id號，然后再拿id去找下屬縣區(qū)，這樣就可以輕松拿到了。既然要實時獲取變化，那我們就實現(xiàn)檢測變化鉤子：
// 二級聯(lián)動組件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
// 聲明縣區(qū)級數(shù)組
country: Array;
constructor() {
/** 重復(fù)代碼不贅述 */
/** 初始化數(shù)組 */
country = [];
}
/** 生命周期檢測變化鉤子 */
ngDoCheck(): void {
/** 遍歷市級數(shù)組 */
for (let i = 0; i < this.city.length; i++) {
/** 若選擇的市級id和市級數(shù)組中的id相吻合 */
if (this.city[i].id == this.cac.countryId) {
/** 將該索引下的counties數(shù)組賦予給區(qū)縣級數(shù)組 */
this.country = this.city[i].counties;
}
/** 我們無法避免直轄市的情況，所以多一重判斷 */
if (this.country.length > 0) {
/** 為了用戶體驗，我們要盡量在用戶選擇市級城市后，默認(rèn)選擇一個區(qū)縣級城市 */
this.cac.country.id = this.country[0].id;
}
}
}
}
最后再補(bǔ)上區(qū)縣級下拉框：
到此為止，大功告成，再也不用去依賴別人的庫了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
