如何使用.ts文件中的CDN js脚本中的函数

时间:2019-02-15 09:22:56

标签: angular

我需要在有角度的组件内使用远程CDN脚本。 (这将显示GDPR的弹出窗口)。我已经导入了脚本,但是无法调用组件内部的方法。

因此,我已将脚本导入到index.html文件中。在我的app.component.ts文件中,我为要调用的函数声明了一个变量。但是浏览器仍然告诉我该变量未定义。

Index.html文件:

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta charset="utf-8">
  <title>AutoDiagnostic</title>
  <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="http://cdn.tagcommander.com/3905/uat/tc_autodiag_55.js"></script>
</body>
</html>

app.component.ts文件:

import { Router, NavigationEnd, Event } from '@angular/router';
import { Component, OnInit } from '@angular/core';

declare let tc_events_55: any; // <=== the function i want to use

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {
    router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        tc_events_55(this, 'virtualPageview', { page: this.router.url });
  }
});
 }
  ngOnInit(): void {}

  isTagCoCookieCreated() {
    return document.cookie.indexOf('TC_OPTOUT') !== -1;
  }
}

我希望它可以使我能够使用cdn .js脚本中的功能,但我没有。我不能将脚本集成为本地资源,因为我必须根据部署环境从cdn调用它。

有什么想法吗? :)

1 个答案:

答案 0 :(得分:0)

通常这是行不通的。问题是您需要在library中导入app.module。您需要在app.module中进行以下操作:

import 'tc_autodiag_55';

然后您可以在其他组件中使用该库。