Angular External js库调用Document.Ready

Using a 3rd party js library in my .net core asp angular app. The library applies it's logic in the $(document).ready method. So im having an issue where the libraries aren't applying correctly on a angular route change because the $(document).ready method doesn't fire.

在我的.net核心asp角应用程序中使用第三方js库。该库在$（document）.ready方法中应用它的逻辑。所以我有一个问题，即库不能正确应用角度路由更改，因为$（document）.ready方法不会触发。

I've referenced the external js library in my angular-cli scripts section.

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

I opened the 3rd party js file and added a method to it that calls the same logic that they are calling in the document ready. Im just struggling to find a way to call that method from my angular typescript component.

我打开了第三方js文件，并为其添加了一个方法，该方法调用它们在文档准备中调用的相同逻辑。我只是在努力寻找一种从我的angular typescript组件中调用该方法的方法。

I've created a simple cut down js file to test it out and simplify the problem. I have the following Tester.js which is referenced in my -angular-cli.json under the scripts tag:

我已经创建了一个简单的减少js文件来测试它并简化问题。我有以下Tester.js，它在我的-angular-cli.json中在scripts标签下引用：

(function ($) {
    "use strict";

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

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

 })(jQuery);

Im wanting to be able to call the CallMe() method when from inside a ts component file. The CallMe() gets fired once as expected on the document.ready event but I need to work out how to call this ad hoc from within my ts scripts.

我希望能够从ts组件文件内部调用CallMe（）方法。 CallMe（）会在document.ready事件中按预期触发一次，但我需要弄清楚如何在我的ts脚本中调用此ad hoc。

Any ideas?

有任何想法吗？

1 个解决方案

#1

Step 1

步骤1

Check if the external library is available on npm. If so you may be able to import the desired function rather than altering a vendored file.

检查外部库是否在npm上可用。如果是这样，您可以导入所需的功能，而不是更改出售的文件。

For example, it may provide an API such that:
YourTsComponent.ts

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

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

// on route change
CallMe()

If something like that is available, great, otherwise...

如果有类似的东西可用，很棒，否则......

Step 2

第2步

Confirm your theory with a global (attach CallMe to window temporarily). If your theory is correct, you should be able to get the desired behavior by calling this global variable on route change.

使用全局确认您的理论（暂时将CallMe附加到窗口）。如果您的理论是正确的，那么您应该能够通过在路由更改时调用此全局变量来获得所需的行为。

Tester.js

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

YourTsComponent.ts

// on route change
window._CallMe()

If that doesn't work, you must reevaluate your theory.

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

but if it does ...

但如果确实......

Step 3

第3步

Convert the vendored library to a module that can be consumed by your app. Your mileage may vary based on what (if any) module system you are using. For example, if you are using require.js:

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

Tester.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

YourTsComponent.ts

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

// on route change
CallMe()

If you're not keen on re-writing a vendored library

如果你不热衷于重写一个卖家的图书馆

You may consider overriding .ready's default behavior so that it may be retriggered. There Are a few answers here if you want to go this route, but be warned, overriding default jQuery behavior is probably much more error prone than editing a single vendored file.

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