我的公司要求我将跟踪数据发送到 <head> 中定义的全局函数。这样分析团队就可以进行研究。他们不了解 Angular 2、框架等，并希望它与文档中的完全一样:没有异常(exception)。
<head>
...
<script type="text/javascript">
function sendAnalytics(data) {
console.log("GTM data sent" + data);
};
var gaData = [_dl];
</script>
</head>
因此，在我的 Angular 服务中，我像这样调用全局定义的函数
window['sendAnalytics'](GTMData_Object);
这适用于页面加载，但当我进入各种路线时，全局定义的函数不再运行？
我尝试过这样的 NG 区域，但仍然没有成功。
this.zone.runOutsideAngular(() => window['sendAnalytics'](GTMData_Object);)
我知道有更好的方法来处理 Angular 2 中的 Google 标签管理器，但显然，我不允许这样做(我尝试过!)。
编辑: 该网站使用路由来跟踪我们想要跟踪的每个使用交互。我总是看到数据传入console.log()，因此它会传递到服务良好。初始页面加载后，我停止在全局函数中获取日志。
服务方法示例
search_result_clicks(
search_term: string,
): void {
let trackObject = {
'site_events': {
'search_click': search_term
};
console.log(trackObject);
//push to GTM via global function defined in header
try { window['sendAnalytics'](trackObject); }
catch (err) {
this.handleError(err);
}
}
编辑:如果我将脚本标签和函数放在 <app-root> 中然后 Angular 就可以作为全局元素定期访问它。对头部或 body 不起作用。它仍然在index.html 上，这似乎是我们所能得到的最接近的结果。
编辑2:如果放在下面<app-root>，也可以在正文中使用
所以对于处于这种情况的其他人......
header 中的全局函数 + Angular 2 = bad ；必须放在app-root下面或中
头中字符串、数组、对象的全局变量 + Angular 2 = OK；到目前为止，据我所知，GTM 运行良好。
在应用程序根目录下或页面底部的索引 html 中定义的全局函数和变量 = 好的。
最佳答案
您可以将外部函数作为提供者提供给 Angular，并在整个应用程序中共享。当你调用它时，它会调用全局函数。
您可以查看this answer这与您的问题类似。
window.sharedService = new SharedService();
@NgModule({
providers: [{provide: SharedService, useValue: window.sharedService}],
...
})
class AppModule1 {}
@NgModule({
providers: [{provide: SharedService, useValue: window.sharedService}],
...
})
class AppModule2 {}
class MyComponent {
constructor(private zone:NgZone, private sharedService:SharedService) {
sharedService.someObservable.subscribe(data => this.zone.run(() => {
// event handler code here
}));
}
}
希望对你有帮助
关于javascript - Angular 2 : call a function defined globally in header only works on page load? 不是每次都是？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46308184/