第angular6填坑之sdk的方法技術(shù)背景：angular+antzorro

最為大型前端團隊首選的前端技術(shù)框架，angular，在國內(nèi)多少還是有些水土不服。本人將針對angular做個一系列的填坑分享。

坑一：sdk

angular的sdk不屬于各個模塊，直接掛載在body下面，antdesign直接使用sdk，導致任何的彈出層，如select，dropdown，picker等在彈出來的時候自動創(chuàng)建覆蓋全局的sdk，需要點擊sdk才能關(guān)閉已打開的下拉。

明顯需要點擊兩次才能出現(xiàn)一個下拉是產(chǎn)品們不能接受的。

解決方案有兩個，一個是修改底層源碼，拋棄sdk，明顯成本巨大，而且bug會層出不窮，考慮不周全，建議缺少前端架構(gòu)組的團隊就不用考慮了。

本人選擇了另外一個方案，有點取巧，但是能快速解決問題。

步奏一：

將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(constvofe['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;

}elseif(v.tagName=='NZ-PICKER'){

//picker獲取sign

this.sign=v.classList[0];

this.signType='NZ-PICKER';

break;

//popover獲取sign

if(v.getAttributeNodev.getAttributeNode('nz-popover')v.getAttribute('nz-popover')==''){

this.sign='NZ-POPOVER';

this.signType='NZ-POPOVER';

break;

}

步奏四：關(guān)閉已打開的下拉組件

為什么叫prepareHideModal，這是獲取sign前的操作，先關(guān)閉再去獲取點擊下拉的sign

getSign方法在關(guān)閉后執(zhí)行

prepareHideModal(e){

letdoClose=true;

if(window['globalSignType']){

this.hideAllmodal();

window['globalSignType']=null;

return;

//如果有sign，關(guān)閉已打開的

if(this.sign){

let_sign=this.sign;

//判斷某些情況下不關(guān)閉彈框

if(_sign=='NZ-POPOVER'){

//解決沒有特使標識時點擊cdk本身不消失

for(constvofe['path']){

if(v.classListv.classList.contains('cdk-overlay-container')){

doClose=false;

}else{

//常規(guī)有指定sign時點擊選擇器自身時不消失

for(const