Angular External js庫調用Document.Ready

Question

在我的.net核心asp角度應用程序中使用第三方js庫。 該庫在$（document）.ready方法中應用它的邏輯。 所以我有一個問題，即庫不能正確應用角度路由更改，因為$（document）.ready方法不會觸發。

我在angular-cli腳本部分引用了外部js庫。

我打開了第三方js文件，並為其添加了一個方法，該方法調用與文檔准備好相同的邏輯。 我只是在努力尋找一種從我的angular typescript組件中調用該方法的方法。

我已經創建了一個簡單的剪切js文件來測試它並簡化問題。 我有以下Tester.js，它在我的-angular-cli.json中在scripts標簽下引用：

(function ($) {
    "use strict";

    $(document).ready(function () {        
        CallMe();
    });

    function CallMe(){
         console.log('HEY I GOT CALLED');
    }

 })(jQuery);

我希望能夠從ts組件文件內部調用CallMe（）方法。 CallMe（）會在document.ready事件中按預期觸發一次，但我需要弄清楚如何在我的ts腳本中調用此ad hoc。

有任何想法嗎？

Answer 1

步驟1

檢查外部庫是否在npm上可用。 如果是這樣，您可以導入所需的功能，而不是更改出售的文件。

例如，它可以提供API，使得：
YourTsComponent.ts

const CallMe = require('library').CallMe
// or
import { CallMe } from 'library'

// on route change
CallMe()

如果這樣的東西可用，很棒，否則......

第2步

使用全局確認您的理論（暫時將CallMe附加到窗口）。 如果您的理論是正確的，那么您應該能夠通過在路由更改時調用此全局變量來獲得所需的行為。

Tester.js

(function($) {
  "use strict";

  $(document).ready(function() {
    CallMe();
  });

  function CallMe() {
    console.log('HEY I GOT CALLED');
  }

  // TODO - remove (test only)
  window._CallMe = CallMe
})(jQuery);

YourTsComponent.ts

// on route change
window._CallMe()

如果這不起作用 ，你必須重新評估你的理論。

但如果確實......

第3步

將銷售庫轉換為可供應用程序使用的模塊。 您的里程可能會根據您使用的模塊系統（如果有）而有所不同。 例如，如果您使用的是require.js：

Tester.js

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {
  "use strict";

  function CallMe() {
    console.log('HEY I GOT CALLED');
  }

  $(document).ready(function() {
    CallMe();
  });

  return CallMe
}));

YourTsComponent.ts

const CallMe = require('/path/to/tester.js')

// on route change
CallMe()

如果你不熱衷於重寫一個賣家的圖書館

您可以考慮覆蓋.ready的默認行為，以便可以重新觸發它。 如果你想要這條路線 ， 這里有一些答案 ，但要注意，覆蓋默認的jQuery行為可能比編輯單個出售文件更容易出錯。