Как использовать JS Файл в Angular Машинопись - PullRequest
Новая
       21

Как использовать JS Файл в Angular Машинопись

0 голосов
/ 23 февраля 2020

Итак, я купил эту bootstrap тему, и она использует библиотеку aos. js, поэтому я установил библиотеку через npm и добавил ее в тег scripts моего angular. json следующим образом: 

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/aos/dist/aos.js"
            ]

Я могу активировать сам плагин AOS, вызвав его в app.component.ts 

import {Component, OnInit} from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}

Но тема поставляется с файлом aos. js, предоставляя опции для плагина AOS: 

//
// aos.js
// Theme module
//

'use strict';

(function() {

  //
  // Functions
  //

  function init() {
    var options = {
      duration: 700,
      easing: 'ease-out-quad',
      once: true,
      startEvent: 'load'
    }
    AOS.init(options);
  }


  //
  // Events
  //

  if (typeof AOS !== 'undefined') {
    init();
  }

})();

Вы можете видеть, что он уже вызывает функцию AOS.init (), поэтому я предполагаю, что вместо вызова плагина непосредственно из моего app.component.ts мне нужно импортировать theme aos. js file и вместо этого вызовите метод init(). После этого файл app.component.ts выглядит следующим образом: 

import {Component, OnInit} from '@angular/core';
import * as AOSTheme from '../assets/js/aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'paydpromo-app';

  ngOnInit(): void {
    AOSTheme.init();
  }
}

Когда я запускаю его через ng serve, плагин и анимация работают, но консоль отображает ошибку TypeError: _assets_js_aos__WEBPACK_IMPORTED_MODULE_2__.init

Как правильно импортировать DOM-манипуляторы js libs в ваше приложение angular?

1 Ответ

0 голосов
/ 23 февраля 2020

после добавления сценария js в файл angular. json .. объявите библиотеку внутри компонента, как показано ниже, без импорта .. 

import {Component, OnInit} from '@angular/core';
declare var AOS: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}
...