Angular External js library calling Document.Ready
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的更多相关文章
- angular中实现jQuery的Document Ready
		angular中不推荐混用JQuery的,原因呢问度娘. 其实这是一个比较蛋疼的问题,尤其是angular2.0,尽量不要在页面上写js,用ts写到模块里面去吧.. 汲取各位先人的智慧,还是列一下 w ... 
- js中的document.ready
		1.概念 表示在dom结构绘制完成后执行,可能DOM元素关联的部分并未加载完 2.写法 $(document).on("ready",function(){ }) $(docume ... 
- $( document ).ready()&$(window).load()
		$( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ... 
- JQuery官方学习资料(译):$( document ).ready()
		一个页面直到document是”ready“才能被安全的操作,Jquery为你检查这种状态.代码包含在$( document ).ready()的内部将会仅仅运行一次在页面Document ... 
- window.onload与$(document).ready()
		window.onload是原生JS事件,$(document).ready()是Jquery实现的与其作用类似的事件. 二者区别如下: 1.执行时间不同 $(document).ready()是DO ... 
- 细说document.ready和window.onload
		原文 简书原文:https://www.jianshu.com/p/bbf28d61aa1f 大纲 1.对页面加载的认识 2.关于document.ready() 3.关于document.onloa ... 
- JS的window.onload与JQuery的$(document).ready(function(){})的区别
		前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ... 
- JS 页面加载触发事件 document.ready和window.onload的区别
		document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ... 
- 菜鸟学JS(五)——window.onload与$(document).ready()
		我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ... 
随机推荐
- I/O控制方式
			I/O控制方式 在计算机系统中,CPU管理外围设备也有几种类似的方式: 1 程序查询方式 程序查询方式是早期计算机中使用的一种方式.数据在CPU和外围设备之间的传送完全靠计算机程序控制,查询方式的优点 ... 
- margin赋值为负值的几种效果(负值像素,负值百分数)
			1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: <!DOCTYPE html> <html lang=" ... 
- windows彻底删除Oralce
			以下是彻底删除Oralce的步骤:1. 开始->设置->控制面板->管理工具->服务停止所有Oracle服务. 2. 开始->程序->Oracle - OraHom ... 
- 〖Linux〗zigbee实验之cc2430移植tinyos2.x的步骤(Ubuntu13.10)
			开发环境:Ubuntu13.10 1. 添加源,并安装tinyos-2.11:sudo gedit /etc/apt/sources.list #往里边添加deb http://tinyos.sta ... 
- CentOS 7  网络磁盘挂载到本地 并测试传输速度
			本文中的配置只做测试使用,正式环境中考虑到安全,请自行结合网上介绍的配置细节完善配置内容. 首先明确两个概念,服务器和客户端(本地),我们要做的是将服务端的硬盘上的/home/liuyx 目录挂载到本 ... 
- Android仿掌上英雄联盟首页,实现折叠效果
			概述 仿掌上英雄联盟首页的demo 详细 代码下载:http://www.demodashi.com/demo/10695.html 首页大概分为几个部分 状态栏 标题栏 轮播图 切换的Tab 资讯列 ... 
- .NET的多种事务处理
			Oracle 的事务操作,有时候想在批量操作数据集合的时候,执行一次失败,即为了避免数据异常,将所有的操作回滚..NET给我们提供了良好的事务操作,Oracle端也有事务操作,可以灵活使用,此处介绍. ... 
- 配置Eclipse 3.3 + tomcat 6.0 + lomboz 3.3进行Web开发
			http://www.cnblogs.com/xtsong/articles/1203155.html我以前编程用的都是Eclipse 3.2,这次跑到www.eclipse.org上去溜达了一番,发 ... 
- 网站博客更换主机空间搬家:Discuz! X2.5老鹰主机搬家全过程
			http://www.freehao123.com/discuz-x2-5-banjia/由于我放在hawkhost老鹰主机主机的部落论坛就要到期了,而老鹰主机的续费价格却是按照原价来的,没有任何优惠 ... 
- MySQL插入性能优化
			目录 MySQL插入性能优化 代码优化 values 多个 一个事务 插入字段尽量少,尽量用默认值 关闭 unique_checks bulk_insert_buffer_size 配置优化 inno ... 
