Как импортировать или использовать внешние файлы JS и функции в моем угловом веб-приложении - PullRequest
Новая
       35

Как импортировать или использовать внешние файлы JS и функции в моем угловом веб-приложении

0 голосов
/ 28 марта 2019

Я хочу интегрировать внешний код (файлы html, js и css) в мое угловое веб-приложение.

в этом внешнем коде 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"
            ]

, а также импортировал все js-файлы в index.html в мое угловое веб-приложение 

 <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

но это не сработало.

кто-нибудь может мне помочь и дать мне несколько советов.

С наилучшими пожеланиями,

Лев

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

После помещения внешних скриптов в angular.json (правильные пути и все), в компоненте вы должны 

declare const initComparisons;
// ...
ngOnInit() {
  initComparisons();
}
0 голосов
/ 28 марта 2019

Если вы хотите использовать внешние js в своем угловом проекте, вам нужно импортировать в ваш angular.json область «scripts»: [], которая позволит вам без проблем собрать js и выполнить сборку после.

...