angular6 填坑之sdk的方法
技術背景：angular + ant zorro
最為大型前端團隊首選的前端技術框架，angular，在國內多少還是有些水土不服。本人將針對angular做個一系列的填坑分享。
坑一：sdk
angular的sdk不屬于各個模塊，直接掛載在body下面， ant design直接使用sdk，導致任何的彈出層，如select，dropdown，picker等在彈出來的時候自動創(chuàng)建覆蓋全局的sdk，需要點擊sdk才能關閉已打開的下拉。
明顯需要點擊兩次才能出現(xiàn)一個下拉是產(chǎn)品們不能接受的。
解決方案有兩個，一個是修改底層源碼，拋棄sdk，明顯成本巨大，而且bug會層出不窮，考慮不周全，建議缺少前端架構組的團隊就不用考慮了。
本人選擇了另外一個方案，有點取巧，但是能快速解決問題。
步奏一：
將sdk縮小至1x1px，讓鼠標可以點擊網(wǎng)頁中任意地方。
.cdk-overlay-backdrop {
width: 1px!important;
height: 1px!important;
}
步奏二：監(jiān)聽document點擊事件
document.addEventListener('click', (e) => {
this.prepareHideModal(e);
});
步奏三：獲取當前點擊的select等的唯一標識
使用sdk的組件比較多，有的有唯一標識，沒有的特殊處理
getSign(e) {
for (const v of e['path']) {
if (v.tagName == 'NZ-SELECT' || v.tagName == 'APP-SUBJECTPICKER') {
// 下拉框獲取sign
if (v.classList[0].includes('ng-tns-')) {
this.sign = v.classList[0];
} else {
this.sign = v.classList[1];
}
this.signType = 'NZ-NORMAL';
break;
} else if (v.tagName == 'NZ-PICKER') {
// picker 獲取sign
this.sign = v.classList[0];
this.signType = 'NZ-PICKER';
break;
}
// popover 獲取sign
if (v.getAttributeNode && v.getAttributeNode('nz-popover') && v.getAttribute('nz-popover') == '') {
this.sign = 'NZ-POPOVER';
this.signType = 'NZ-POPOVER';
break;
}
}
}
步奏四：關閉已打開的下拉組件
為什么叫prepareHideModal，這是獲取sign前的操作，先關閉再去獲取點擊下拉的sign
getSign方法在關閉后執(zhí)行
prepareHideModal(e) {
let doClose = true;
if (window['globalSignType']) {
this.hideAllmodal();
window['globalSignType'] = null;
return;
}
// 如果有sign，關閉已打開的
if (this.sign) {
let _sign = this.sign;
// 判斷某些情況下不關閉彈框
if (_sign == 'NZ-POPOVER') {
// 解決沒有特使標識時點擊cdk本身不消失
for (const v of e['path']) {
if (v.classList && v.classList.contains('cdk-overlay-container')) {
doClose = false;
}
}
} else {
// 常規(guī)有指定sign時點擊選擇器自身時不消失
for (const v of e['path']) {
if (v.classList && v.classList.contains(_sign)) {
doClose = false;
break;
}
}
}
doClose && this.hideModal(_sign);
}
this.getSign(e);
}
步奏五：最重要的關閉sdk，這邊采用了最簡單的，模擬sdk點擊，完全使用sdk自己的方法
hideModal(sign) {
let cdkDom = document.querySelectorAll('.cdk-overlay-backdrop.cdk-overlay-dark-backdrop.cdk-overlay-backdrop-showing');
let domLen = cdkDom.length;
// 循環(huán)cdk，找到它自身的cdk，模擬點擊隱藏
for (var i = 0; i < domLen; i++) {
var v = cdkDom[i];
if (v['style'].display != 'none') {
v['click']();
break;
}
}
this.sign = null;
this.signType = null;
}
至此算是解決了使用skd組件需要點擊兩次的坑，但是會引起另外一個坑，當頁面出現(xiàn)滾動條時，已打開的下來組件位置不會跟著滾動而去改變。這邊會在另外一篇博客中解決
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- Angular Material Icon使用詳解
- Material(包括Material Icon)在Angular2中的使用詳解
- 從源碼看angular/material2 中 dialog模塊的實現(xiàn)方法
- 詳解angular2封裝material2對話框組件
- Angularjs material 實現(xiàn)搜索框功能
- angular4自定義組件非input元素實現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
- Angular使用Restful的增刪改
- Angular(5.2->6.1)升級小結
- angular6的table組件開發(fā)的實現(xiàn)示例
- Angular6新特性之Angular Material
相關文章
后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
這篇文章主要介紹了后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法的相關資料,需要的朋友可以參考下2016-07-07
Angularjs實現(xiàn)控制器之間通信方式實例總結
這篇文章主要介紹了Angularjs實現(xiàn)控制器之間通信方式,結合實例形式總結分析了AngularJS控制器常用通信方式及相關操作注意事項,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了使用Angular內置模塊進行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
AngularJS基于http請求實現(xiàn)下載php生成的excel文件功能示例
這篇文章主要介紹了AngularJS基于http請求實現(xiàn)下載php生成的excel文件功能,結合實例形式分析了AngularJS http請求及文件下載等相關操作技巧,需要的朋友可以參考下2018-01-01
Angular事件之不同組件間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法，利用Angular Event在不同組件之間傳遞數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本篇文章主要介紹了詳解angular2封裝material2對話框組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了AngularJS的控制器的使用,文中給出了具體的用于HTML中的對象示例,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了angular4應用中輸入的最小值和最大值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
AngularJS基礎 ng-mouseover 指令簡單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎知識,并附代碼示例,有興趣的小伙伴可以參考下2016-08-08