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

const CallMe = require('library').CallMe
// or
import { CallMe } from 'library' // on route change
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

(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()

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

(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()

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. wepy - Cannot read property 'Promise' of undefined

    正当我们准备试探示例时,突然.... 造成这个错误有两个原因 (wepy以前的版本默认启动了Promise,自1.4.x以后需要手动开启) 1.未下载Promise 详情见启用文档:Promise   ...

  2. 通过Servlet生成验证码图片(转)

    原文地址:http://www.cnblogs.com/xdp-gacl/p/3798190.html 一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类, ...

  3. [转]自定义Drawable实现灵动的红鲤鱼动画(上篇)

    此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝试了一下,如下是我用Android实现的效果图:   小鱼儿 由于整个绘制分析过程比较繁琐所以 ...

  4. win10 提速

    1.msconfig --> 引导--> 高级选项 --> 处理器个数2.系统属性 --> 高级 --> 性能(高级)-->高级(更改)-->取消自动管理分页 ...

  5. Ubuntu系统安装VMware Tools的简单方法

    不少网友反映在VMWare虚拟机下安装Ubuntu系统后无法安装VMware Tools,这里给出一个简单方法,只需要几步即可解决. 第一步:进入系统后,点击虚拟机上的安装vmware tools,回 ...

  6. TOMCAT清理

      CreateTime--2017年7月10日08:54:00Author:Marydon 如何清理TOMCAT 方式一:通过tomcat的安装目录进行清理 找到TOMCAT的根目录,如图: 实质: ...

  7. 像烟瘾一样的Adobe Flash,真的戒不掉吗?

    近来对Adobe Flash来说真是段难过的日子.Hacking Team公司外泄的440GB电子邮件数据已成为黑客挖掘安全漏洞的宝藏. 光是Flash就被发现了三个不同的漏洞: l  CVE-201 ...

  8. c中的static

    static的作用 1)保持变量值:在函数体,一个被声明为静态的变量在这一函数中可以维持其值.这句话可能描述不太准确,大家看下面这个例子吧. void staticLocalVar() { stati ...

  9. tomcat7.0.27的bio,nio.apr高级运行模式(转)

    一 前言 tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或者启动日志.或者登录他们的默认页面http://localhost:8080/查看其中的服务 ...

  10. python 版websocket实现

    ubuntu下python2.76 windows python 2.79, chrome37 firefox35通过 代码是在别人(cddn有人提问)基础上改的, 主要改动了parsedata和se ...