jjzjj

javascript - Angular 外部 js 库调用 Document.Ready

coder 2024-05-16 原文

在我的 .net 核心 asp Angular 应用程序中使用第 3 方 js 库。该库在 $(document).ready 方法中应用它的逻辑。所以我遇到了一个问题，即库没有正确应用于 Angular 路由更改，因为 $(document).ready 方法没有触发。

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

我打开了第 3 方 js 文件并向其中添加了一个方法，该方法调用了与他们在准备就绪的文档中调用的逻辑相同的逻辑。我只是在努力寻找一种方法来从我的 Angular typescript 组件中调用该方法。

我创建了一个简单的精简 js 文件来测试它并简化问题。我有以下 Tester.js，它在我的脚本标记下的 -angular-cli.json 中被引用:

(function ($) {
    "use strict";

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

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

 })(jQuery);

我希望能够在 ts 组件文件中调用 CallMe() 方法。 CallMe() 按预期在 document.ready 事件中被触发一次，但我需要弄清楚如何从我的 ts 脚本中临时调用它。

有什么想法吗？

最佳答案

第一步

检查外部库是否可用 npm .如果是这样，您也许能够导入所需的功能，而不是更改 vendor 提供的文件。

例如，它可能提供这样的 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()

如果您不热衷于重写 vendor 提供的库

您可以考虑覆盖 .ready 的默认行为，以便重新触发它。 There Are a few answers here if you want to go this route ，但请注意，覆盖默认的 jQuery 行为可能比编辑单个销售文件更容易出错。

关于javascript - Angular 外部 js 库调用 Document.Ready，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51094841/

javascriptDocumentCallMefunctioncodejqueryangulartypescript

有关javascript - Angular 外部 js 库调用 Document.Ready的更多相关文章

  1. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  2. c# - 如何在 ruby​​ 中调用 C# dll？ - 2

    如何在ruby​​中调用C#dll？ 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL

  3. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  4. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  5. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  6. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  7. ruby - 如何找到调用当前方法的方法 - 2

    如何找到调用此方法的位置？defto_xml(options={})binding.pryoptions=options.to_hifoptions&&options.respond_to?(:to_h)serializable_hash(options).to_xml(options)end 最佳答案 键入caller。这将返回当前调用堆栈。文档:Kernel#caller.例子[0]%rspecspec10/16|===================================================62=====

  8. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  9. ruby - 为什么当我调用类的实例方法时，初始化不显示为方法？ - 2

    我正在写一篇关于在Ruby中几乎一切都是对象的博客文章，我试图通过以下示例来展示这一点:classCoolBeansattr_accessor:beansdefinitialize@bean=[]enddefcount_beans@beans.countendend所以从类中我们可以看出它有4个方法(当然，除非我错了):它可以在创建新实例时初始化一个默认的空bean数组它可以计算它有多少个bean它可以读取它有多少个bean(通过attr_accessor)它可以向空数组写入(或添加)更多bean(也通过attr_accessor)但是，当我询问类本身它有哪些实例方法时，我没有看到默认

  10. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

随机推荐