angular6 填坑之cdk

技術背景：angular + ant zorro

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

坑一：cdk

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

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

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

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

 

步奏一：

將cdk縮小至1x1px，讓鼠標可以點擊網頁中任意地方。

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

步奏二：監聽document點擊事件

document.addEventListener('click', (e) => {
    this.prepareHideModal(e);
});

步奏三：獲取當前點擊的select等的唯一標識

使用cdk的組件比較多，有的有唯一標識，沒有的特殊處理

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);
    }

步奏五：最重要的關閉cdk，這邊采用了最簡單的，模擬cdk點擊，完全使用cdk自己的方法

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組件需要點擊兩次的坑，但是會引起另外一個坑，當頁面出現滾動條時，已打開的下來組件位置不會跟着滾動而去改變。這邊會在另外一篇博客中解決