1

解决方案：

我在这里得到了我的解决方案如何在 Angular 中动态加载外部脚本？

我检查了我在应用程序组件中的路径以相应地加载脚本。

import { Component, OnInit } from "@angular/core";
import { NavigationStart, Router } from "@angular/router";
import { Subscription } from "rxjs";
import { ScriptService } from "./shared/script.service";
import { Location } from "@angular/common";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor(
    router: Router,
    private location: Location,
    public script: ScriptService,
  ) {}

  ngOnInit() {
    if (!this.location.path().includes("admin")) {
      // load script for tawk widget
      this.script.load("tawk").catch(error => console.log(error));
    }
  }
}

上一个问题：

我很难将 tawk 小部件添加到 angular 6 项目中的特定组件。如果我将它添加到 app-root 下的 index.html 页面，它会显示在项目的所有页面中。还有其他方法吗？

示例代码：

<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/17f35g40afc2c34e96e75909/default';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
</script>
<!--End of Tawk.to Script-->

取自此处的示例代码 ---> 将 tawk.to 集成到 Angular 6 (Angular 2) 应用程序中

我已经尝试了以下站点， 将 JavaScript 文件添加到 Angular 4 组件，但它仍然显示在每个页面上。感谢你的帮助！

4

1 回答 1

2

最简单的方法是创建一个组件，而不是在组件的 .ts 中，将脚本附加到正文，如下所示：

onInit(): void {
  const s = this._renderer.createElement('script');
  s.text = `var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
  (function () {
    var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = 'https://embed.tawk.to/${id}/default';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin', '${cors}');
    s0.parentNode.insertBefore(s1, s0);
  })();
  this._renderer.appendChild(this._document.body, s);
}

当然，您需要将 Document 和渲染器注入构造函数

constructor(
  private _renderer: Renderer2,
  @Inject(DOCUMENT) private _document,
) {}

并确保将 twalk.to 设置为 id 和 cors (${id}, ${cors})

于 2019-11-04T22:41:35.660 回答