Angular内部代码与外部代码的交互

        Angular 程序在名为 NgZone 的特殊区域内运行，这种机制提高了变化检测的效率，但将程序内部代码与外部代码隔离开来，降低了内部代码与外部代码交互的便利性，需要添加必要的代码才能完成互相的调用。

1、Angular引入外部对象

        除了使用npm安装外，很多第三方库都是以CDN方式在 index.html 中进行引入。比如 baidu 地图API：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度密钥"></script>

        百度地图API的全部功能都是基于对象提供的，比如创建地图实例：

let map = new BMap.Map("divMap");

        因为是CDN方式引用的JS库，内部代码中不能以 import 方式添加 BMap 的引用，可以在使用 BMap 的代码文件头部通过添加声明的方式达到引用的效果：

import { Component, AfterViewInit } from '@angular/core';
declare var BMap: any;    //声明外部对象
 
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
})
export class MapComponent implements AfterViewInit {
      constructor(){}

      ngAfterViewInit(): void {
        setTimeout(() => {
          let map = new BMap.Map("divMap");
        }, 100);
      }
}

2、Angular调用外部方法

        与外部对象的引入方法一样，在内部代码中也可以添加外部方法的声明达到引入的效果：

import { Component } from '@angular/core';
declare function playVideo(url);  //声明外部方法
 
@Component({
  selector: 'app-video-list',
  templateUrl: './video-list.component.html',
})
export class VideoListComponent {
    constructor(){}

    playItem(item){
        playVideo(item.url);    
    }
}

3、外部代码调用Angular内部方法

        在很多混合开发的APP中，原生代码会需要调用页面的方法完成指定的功能，这时候就需要Angular内部代码提供方法供外部调用，此时使用Angular 的 NgZone 模块功能就能满足这一需求， index.html 中：

window.appRef = {};

//调用内部方法
var callInternalFunction = function () {
    window.appRef.zone.run(function () {
        let result = window.appRef.component.internalFunction();
    });
}

        app.component.ts 中：

import { Component, NgZone } from '@angular/core';
export class AppComponent {
    
     constructor(private ngZone: NgZone) {
        window["appRef"] = { component: this, zone: this.ngZone };
     }

     //供外部代码调用的方法
     internalFunction() {
         return 0;
     }
}