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暂时附加到窗口）。如果您的理论是正确的，您应该能够通过在路线更改时调用此全局变量来获得所需的行为。

测试器.js

(function($) {
  "use strict";

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

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

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

你的TsComponent.ts

// on route change
window._CallMe()

如果这不起作用，你必须重新评估你的理论。

但如果确实如此……

步骤3

将提供的库转换为您的应用程序可以使用的模块。您的里程可能会根据您使用的模块系统（如果有）而有所不同。例如，如果您使用 require.js：

测试器.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
}));

你的TsComponent.ts

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

// on route change
CallMe()

如果您不热衷于重写供应库

您可以考虑覆盖 的.ready默认行为，以便可以重新触发它。如果您想走这条路，这里有一些答案，但请注意，覆盖默认的 jQuery 行为可能比编辑单个供应商文件更容易出错。