Angular外部js库调用Document.Ready

时间:2018-06-29 05:28:51

标签: javascript jquery angular typescript

在我的.net core asp角度应用程序中使用第三方js库。该库在$(document).ready方法中应用其逻辑。因此,由于$(document).ready方法不会触发,因此库在角度路线更改上无法正确应用时会出现问题。

我在我的angular-cli脚本部分中引用了外部js库。

我打开了第三方js文件,并在其中添加了一个方法,该方法调用与准备好文档时所调用的逻辑相同的逻辑。我只是在努力寻找一种从我的角度打字稿组件调用该方法的方法。

我创建了一个简单的缩减js文件,以对其进行测试并简化问题。我的脚本-angular-cli.json中引用了以下Tester.js:

AttributeError

我希望能够从ts组件文件中调用CallMe()方法。 CallMe()在document.ready事件中按预期被触发了一次,但是我需要弄清楚如何从ts脚本中调用此ad hoc。

有什么想法吗?

1 个答案:

答案 0 :(得分:4)

第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的默认行为,以便重新触发它。 There Are a few answers here if you want to go this route,但请注意,覆盖默认jQuery行为可能比编辑单个供应商文件更容易出错。