Question

在我的.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。

有什么想法吗？

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

Angular外部js库调用Document.Ready

1 个答案: