這篇文章主要為大家展示了“angular6中sdk的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angular6中sdk的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。成都創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)公司核心團(tuán)隊十年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

坑一：sdk

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

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

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

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

步奏一：

將sdk縮小至1x1px，讓鼠標(biāo)可以點擊網(wǎng)頁中任意地方。

.cdk-overlay-backdrop {

  width: 1px!important;

  height: 1px!important;

}

步奏二：監(jiān)聽document點擊事件

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

});

步奏三：獲取當(dāng)前點擊的select等的唯一標(biāo)識

使用sdk的組件比較多，有的有唯一標(biāo)識，沒有的特殊處理

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;

      }

    }

  }

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

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

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

prepareHideModal(e) {

    let doClose = 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') {

        // 解決沒有特使標(biāo)識時點擊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);

  }

步奏五：最重要的關(guān)閉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;

  }

以上是“angular6中sdk的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！