如何在我的角度Web應用程序中導入或使用外部JS文件和函數

Question

我想將外部代碼（html，js和css文件）集成到我的角度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中，但是沒有用。 我看不到任何動畫。

我用google搜索了一些解決方案，我已經改變了我的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"
            ]

並在我的角度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

但它沒有用。

有人可以幫助我，並給我一些建議。

最好的祝福，

獅子座

Answer 1

如果你想在你的角度項目中使用外部js，你必須在你的angular.json中導入“scripts”：[]區域，這將允許你帶來js並在沒有問題的情況下進行構建。

Answer 2

將外部腳本放在angular.json（路徑正確和所有內容）之后，應該在組件中

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

如何在我的角度Web應用程序中導入或使用外部JS文件和函數

問題描述

2 個解決方案

解決方案1
0 2019-03-28 15:08:00

解決方案2
0 2019-03-28 15:10:57

如何在我的角度Web應用程序中導入或使用外部JS文件和函數

問題描述

2 個解決方案

解決方案1 0 2019-03-28 15:08:00

解決方案2 0 2019-03-28 15:10:57

解決方案1
0 2019-03-28 15:08:00

解決方案2
0 2019-03-28 15:10:57