技術背景：angular + ant zorro

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

坑一：sdk

angular的sdk不屬於各個模組，直接掛載在body下面， ant design直接使用sdk，導致任何的彈出層，如select，dropdown，picker等在彈出來的時候自動建立覆蓋全域性的sdk，需要點選sdk才能關閉已開啟的下拉。

明顯需要點選兩次才能出現一個下拉是產品們不能接受的。

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

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

步奏一：

將sdk縮小至1x1px，讓滑鼠可以點選網頁中任意地方。

.cdk-overlay-backdrop {
    width: 1px!important;
    height: 1px!important;
}

步奏二：監聽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方法在關閉後執行

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 {
                // 常規有指定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;
        // 迴圈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元件需要點選兩次的坑，但是會引起另外一個坑，當頁面出現滾動條時，已開啟的下來元件位置不會跟著滾動而去改變。這邊會在另外一篇部落格中解決