Question

这是问题...... 我首先有一些库有自己的d.ts文件，所以我能够在angular2项目中使用它们，但我没有其他的d.ts，而且开源存储库中的库也不完整或不是更新了我希望使用的.js库的更新版本。

所以我想尝试相同的操作，但反方向，就像我有一些限制因为angular2 ...我能够直接将javascript包含到html页面，并且angular2环境将一如既往地被触发。 / p>

让我发布一些代码，以便你更好地理解：

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js" charset="utf-8"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
<!-- Here my custom javascript that will create some controls under body-->
<script>
<!-- this script will create some custom controls-->
</script>
</body>
</html>

因此，当你看到角度将被配置并加载为alwasys但我的自定义javascript也将被执行。

我想通过页面底部的javascript进行通信 angular2组件/模块

任何想法?????????

我想象的最奇怪的是创建一个隐藏的div，我存储我的json并使用它来与组件/模块通信......它是脏的，但你可能有一些更好的想法!!!!!! < / p>

Answer 1

使用Google地图网页组件。 https://github.com/GoogleWebComponents/google-map Angular2是在考虑Web组件的情况下构建的。 Web组件的强大之处在于它们公开了一个可以从任何框架，工具集或普通旧javascript访问的界面。

以下是在Angular2中使用映射Web组件的示例： https://technology.amis.nl/2016/02/10/how-to-use-polymer-webcomponents-in-angular2/

<强>更新

或者，如果您确实需要Google Maps JavaScript API，只需创建一个返回window.google.maps.Map对象的提供程序，以便您可以直接在组件或服务中调用它。

另一种选择是使用此包：https://www.npmjs.com/package/google-maps

Answer 2

Jherzon，我将解释如何整合第三方图表库。希望它会对你有所帮助;只需用您的库及其主对象类替换引用：

在dependencies的{{1}}中添加库。我添加了packages.json
运行"chart.js": "2.2.1"以将库安装为NPM模块
将库添加到SystemJS包中。以下是我npm install的摘录：

systemjs.config.js

由于库中没有打字稿定义文件，编译器会在整个地方抛出错误。所以我添加了一个名为// map tells the System loader where to look for things var map = { 'app': 'dist', 'rxjs': 'node_modules/rxjs', '@angular': 'node_modules/@angular', 'chart.js': 'node_modules/chart.js/dist', }; // In packages, add a reference to the JS file with the 3rd party lib var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'chart.js': {main:'Chart.js', defaultExtension: 'js'}, };的文件。它包含以下行（将custom.typings.d.ts替换为第三方库中的主要对象类）：

Chart

并且，我添加了对该文件的引用，因此当我访问对象类的方法和属性时，typescript将看到声明而不是抱怨。在declare var Chart:any;我有：

main.ts

完成所有设置之后：在使用图表的任何组件中，我将导入库，就像我对任何其他类依赖项一样：

///<reference path="./path/to/custom.typings.d.ts"/>

您的路径可能会有所不同，但这基本上就是我的设置。现在，根据需要使用库。对我来说是：

import 'chart.js'; //replace with the SystemJS's map property name used above

Answer 3

抱歉，我没有更新代码，所以这里是解决方案：您将在全局范围内注册回调以通信到angular2，从typescript组件到javascript的更新很容易我们只是调用这个在全局范围注册的回调，但是从javascript调用回调来更新angular2组件有点棘手但是我把你留在这里的一个组成部分：

export class MyComponent {
    selectedData: any;

    constructor(private _ngZone: NgZone,
        private elementRef: ElementRef) {
        this.title = this.companyName;
    }

    public updateDataAction = (data: any) => {
        this._ngZone.runOutsideAngular(() => {
           this._ngZone.run(() => {
               this.selectedData = data[0].value[3];
           });
        })
    };

    ngAfterViewInit() {
        sendMessage(this.updateDataAction);
    }
}

记住SendMessage是一个全局方法，我的意思是在全局范围内注册，当然你需要在d.ts文件中添加定义像这样：

声明函数sendMessage（callback：（（message：string）=＆gt; void））：void;

美丽不是吗？一件艺术品

从javascript调用打字稿，反之亦然

3 个答案: