Question

我是棱角分明的新人。谁能说我怎样才能在角度模板中添加自定义js文件。

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] })

已更新

我想添加以下代码

$("#single-slider").owlCarousel({
      navigation: true,
      slideSpeed: 600,
      autoPlay: 6000,
      singleItem: true,
      pagination: false,
      navigationText: [
          "<i class='fa fa-angle-left'></i>",
          "<i class='fa fa-angle-right'></i>"
      ],
  });

Answer 1

您可以在HTML中添加<script>，但不会工作，因为在构建应用时，Angular DOMSantizer会删除所有<script>。

所以你必须以@trichetriche显示的方式加载自定义js。但是，如果只需要一个组件的js，那么就有一种解决方法，这是一种hacky。

您可以在ngAfterViewInit()中加载/初始化DOM之后加载js。这样Angular DOMSantizer就不知道<script>。

你走了：

constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "../path-to-your-js-or-external-URL";
  this.elementRef.nativeElement.appendChild(s);
}

有关详情，请参阅：https://github.com/angular/angular/issues/4903

Answer 2

你做不到。

但，您可以将其添加到您的应用程序中作为全局脚本，方法是将其添加到angular-cli.json文件中：

"scripts": [
  "assets/xxx.js", // path to assets file
  "../node_modules/moment/moment.js" // Path to node modules dependency
],

Answer 3

在角度

中包含js的3个主要步骤

在assets / scripts和angular-cli包中添加script.js
在资产/脚本的js文件中，你必须有window.initMethod = function（）{...你的代码......}
在你的component.ts中声明let initMethod：any;

如何将自定义js文件添加到角度组件，如css文件

3 个答案: