背景：
最近在做angular项目时，需要集成一个控件，其中需要引入最新的js文件，所以我们要使用：
<script src="/jquery/2.1.1/jquery.min.js"></script>
像这样的方式，并需要写一些初始化的逻辑显示此控件。
先看看效果：
分析：
angular中使用的是ts语言(es6+)，html里也舍去了script脚本。那到底html和script有什么关系呢？
首先，在Angular2框架之中实际使用的是ES6,全称ECMAScript6，是Javascript的下一个版本。官方的例子则是基本采用TS,全称TypeScript,是JS的一个超集。为什么采用新的语言，而不是沿用当前的ES5，官网和社区已经有了很多解释了，新语言当然有新语言的优势，比如定义变量，可以指定类型，而在程序中用错类型，则会在编译过程中就给出警告，不至于等到上线了才发现BUG。既然采用了新的语言，为了跟当前的浏览器系统兼容，当然就有一个翻译过程，准确的说，甭管是TS还是ES6,甚至将来可能的ES7,在当下，都要翻译成ES5,才能在当前流行的浏览器之中运行。这个翻译，行话上讲，也就是“编译”。事实上，编译不仅仅干这么一点事，很多的优化工作、查错工作，也是在这个阶段完成的，比如你使用了没有定义的变量、函数；比如你用错了函数类型；比如你使用了某个函数库但只是用了其中一小部分，那么多没用的部分应当排除掉避免占用宝贵的下载带宽，这些都是在编译过程做到的。好了，既然经过了这么复杂的动作，这个编译也必不可少，那么实际上答案已经出来了：那就是，很多原有理所应当存在的东西，就比如你在HTML中定义的JS对象、变量、函数，那些都是在执行环节，浏览器中才存在的。而在编译阶段，那些东西还只是停留在字符状态，Angular当然并不知道他们存在，也就无法直接的、像原来我们使用HTML-JS一样来使用它们了，这就如同上面那张图，看上去海天一色，互相映衬，但在根本上，它们是在两个世界。
解释：
你肯定早看到了，大量的第三方模块和代码库，通过NPM的管理，共存于这个架构中，彼此友好的相处。你原有的工作，完全可以用同样的方式来工作。
你也可能会说，可我有很多代码没有做到那么好的面向对象化包装，也不想做那么复杂，该怎么办呢？AngularJS也提供了至少2个方法，来完成两个世界的打通工作。
代码实现：
1.通过declare方式引入
在最外层的index.html中嵌入：
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Demo</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><link rel="icon" type="image/x-icon" href="favicon.ico"><link rel="stylesheet" href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="/jquery/2.1.1/jquery.min.js"></script><script src="/Newegg/Survey/newegg-feedback.min.js" type="text/javascript"></script><!-- include the script --><script type="text/javascript">var test = 'test'</script></head><body><app-root></app-root></body></html>
<scripttype="text/javascript">
vartest='test'
</script>是我嵌入的一脚本，并且设置了一个变量
在ts代码里直接定义 ：
import { Component, OnChanges, OnInit, OnDestroy, ViewChild, AfterViewInit, AfterViewChecked, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';declare let test: string;@Component({selector: 'app-root',templateUrl: './ponent.html',styleUrls: ['./ponent.less']})export class AppComponent implements OnInit {constructor() {// webGlObject.init();// console.log(window)// console.log(test)}ngOnInit(): void {console.log(test)
如上，AppComponent不会去管理test，在编译或者运行时，会去script里寻找test，如果没有则打印undfiend。相当于ts代码和script完全是独立的两部分，只是在运行时候才会有关联
2.通过window方式引入(不推荐，angular也许不再浏览器执行)
import { Component, OnChanges, OnInit, OnDestroy, ViewChild, AfterViewInit, AfterViewChecked, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';declare let test: string;declare let window: any;@Component({selector: 'app-root',templateUrl: './ponent.html',styleUrls: ['./ponent.less']})export class AppComponent implements OnInit {constructor() {// webGlObject.init();// console.log(window)// console.log(test)}ngOnInit(): void {console.log(window.test)
这种方式也会输出test的值。
思考：既然直接能访问到window对象，那很多属性都能直接用吧？
如果将来这段Angular代码，很可能不是运行在一个浏览器，其中可能根本没有window/document对象，那时候，这段代码就出错了。当然你可能会说，不不不，我就是在浏览器运行，不考虑别的。OK,我也不较劲，你当我没说，你完全可以就这么用。
但是比较规范的办法，应当是把window对象以及你需要的其它类似对象，写成一个服务，然后注入到ponent之中，这样，即便将来运行环境有变化，只修改服务部分代码，你的主程序完全可以不用修改。
