文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在angular web应用程序中导入或使用外部JS文件和函数

问如何在angular web应用程序中导入或使用外部JS文件和函数
EN

Stack Overflow用户

提问于 2019-03-28 23:03:38

回答 2查看 2.9K关注 0票数 0

我想将外部代码(html、js和css文件)集成到我的angular web应用程序中。

在这段外部代码中，HTML文件如下所示：

index.html

<html>
<header>
</header>
<body>
</body>

 <script src="app/components/landing-page/js/bootstrap.min.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
  <script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script>
    /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
    initComparisons();
  </script>
<html>

如您所见，有几个javascript文件，将调用一个函数initComparisons()。

如果我只双击index.html，一切都会正常工作。但我将这段html代码复制到一个component.html中，这是不起作用的。我看不到任何动画。

我在谷歌上搜索了一些解决方案，并更改了我的angular.json文件，如下所示：

 "scripts": [
              "src/app/components/landing-page/js/imageComparisonSlider.js",
              "src/app/components/landing-page/js/owl.carousel.min.js",
              "src/app/components/landing-page/js/cbpAnimatedHeader.js",
              "src/app/components/landing-page/js/theme-scripts.js"
            ]

并在我的angular web应用程序中导入index.html中的所有js文件

 <script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>

在component.ts中，我也这样做：

import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
    this.isLoggedIn = this.authService.isLoggedIn;
    initComparisons();
  }

我在stackblitz中添加了一些代码；https://stackblitz.com/edit/angular-qowfwy?file=angular.json

但它并没有起作用。

谁能帮帮我，给我一些建议。

诚挚的问候,

狮子座

external-js

javascript

angular

animation

回答 2

Stack Overflow用户

发布于 2019-03-28 23:08:00

如果你想在你的angular项目中使用外部的js，你必须在你的脚本中导入“angular.json”：[]区域，这样你就可以毫无问题地引入这些js并进行构建了。

票数 1

Stack Overflow用户

发布于 2019-03-28 23:10:57

在将外部脚本放入angular.json (路径正确等等)之后，在component中你应该

declare const initComparisons;
// ...
ngOnInit() {
  initComparisons();
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55400866

复制

相似问题

问如何在angular web应用程序中导入或使用外部JS文件和函数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular web应用程序中导入或使用外部JS文件和函数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular web应用程序中导入或使用外部JS文件和函数
EN