https://stackoverflow.com/questions/51094841/angular-external-js-library-calling-document-ready

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

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

  1. const CallMe = require('library').CallMe
  2. // or
  3. import { CallMe } from 'library'
  4. // on route change
  5. CallMe()

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

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

Tester.js

  1. (function($) {
  2. "use strict";
  3. $(document).ready(function() {
  4. CallMe();
  5. });
  6. function CallMe() {
  7. console.log('HEY I GOT CALLED');
  8. }
  9. // TODO - remove (test only)
  10. window._CallMe = CallMe
  11. })(jQuery);

YourTsComponent.ts

  1. // on route change
  2. window._CallMe()

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

but if it does ...

Step 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:

Tester.js

  1. (function(factory) {
  2. if (typeof define === 'function' && define.amd) {
  3. // AMD
  4. define(['jquery'], factory);
  5. } else if (typeof exports === 'object') {
  6. // CommonJS
  7. factory(require('jquery'));
  8. } else {
  9. // Browser globals
  10. factory(jQuery);
  11. }
  12. }(function($) {
  13. "use strict";
  14. function CallMe() {
  15. console.log('HEY I GOT CALLED');
  16. }
  17. $(document).ready(function() {
  18. CallMe();
  19. });
  20. return CallMe
  21. }));

YourTsComponent.ts

  1. const CallMe = require('/path/to/tester.js')
  2. // on route change
  3. 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.

Angular External js library calling Document.Ready的更多相关文章

  1. angular中实现jQuery的Document Ready

    angular中不推荐混用JQuery的,原因呢问度娘. 其实这是一个比较蛋疼的问题,尤其是angular2.0,尽量不要在页面上写js,用ts写到模块里面去吧.. 汲取各位先人的智慧,还是列一下 w ...

  2. js中的document.ready

    1.概念 表示在dom结构绘制完成后执行,可能DOM元素关联的部分并未加载完 2.写法 $(document).on("ready",function(){ }) $(docume ...

  3. $( document ).ready()&$(window).load()

    $( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...

  4. JQuery官方学习资料(译):$( document ).ready()

         一个页面直到document是”ready“才能被安全的操作,Jquery为你检查这种状态.代码包含在$( document ).ready()的内部将会仅仅运行一次在页面Document ...

  5. window.onload与$(document).ready()

    window.onload是原生JS事件,$(document).ready()是Jquery实现的与其作用类似的事件. 二者区别如下: 1.执行时间不同 $(document).ready()是DO ...

  6. 细说document.ready和window.onload

    原文 简书原文:https://www.jianshu.com/p/bbf28d61aa1f 大纲 1.对页面加载的认识 2.关于document.ready() 3.关于document.onloa ...

  7. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  8. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  9. 菜鸟学JS(五)——window.onload与$(document).ready()

    我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...

随机推荐

  1. Java从零开始学二十四(集合工具类Collections)

    一.Collections简介 在集合的应用开发中,集合的若干接口和若干个子类是最最常使用的,但是在JDK中提供了一种集合操作的工具类 —— Collections,可以直接通过此类方便的操作集合 二 ...

  2. 重置outlook 2010

    1.进入 D:\program files\mirosoft office\ioffice14 2.outlook /importprf .\.prf 3.账号问题可以-->控制面板--> ...

  3. Linq to Entity调用存储过程【转】

    http://www.cnblogs.com/chenxizhang/archive/2010/01/03/1638201.html

  4. 【独立开发人员er Cocos2d-x实战 001】csb文件导出和载入

    使用cocos studio进行资源文件导出: 然后在cocosproject中进行载入csb文件:  auto myLayout = CSLoader::createNode("/res/ ...

  5. oracle 多字段去重查询

      oracle 多字段去重查询 CreationTime--2018年6月29日15点11分 Author:Marydon 1.情景展示 需要对表BASE_MRI_DEVICE的COMPNAME.F ...

  6. memcached 下载安装

    wget http://memcached.org/latest tar -zxvf memcached-1.x.x.tar.gz cd memcached-1.x.x ./configure &am ...

  7. POJ----The Suspects

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 18890   Accepted: 9150 Des ...

  8. HDUOJ---The number of divisors(约数) about Humble Numbers

    The number of divisors(约数) about Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...

  9. HTML:减少页面加载时间的方法

    1. 重复的HTTP请求数量应尽量减少 (1)减少调用其他页面.文件的数量. (2)在使用css格式时,常会采用background载入图形文件,而每个background的图像都会产生1次HTTP ...

  10. Java虚拟机学习 - 垃圾收集算法(3)

    跟踪收集器       跟踪收集器采用的为集中式的管理方式,全局记录对象之间的引用状态,执行时从一些列GC  Roots的对象做为起点,从这些节点向下开始进行搜索所有的引用链,当一个对象到GC  Ro ...