Блог

Главная - Вопросы по программированию - Angular 7 добавить плагин Javascript

Angular 7 добавить плагин Javascript

#javascript #angular

#javascript #angular

Вопрос:

Я намерен добавить плагин javascript, а именно этот:

https://steven.codes/typerjs/

До сих пор мой подход заключался в том, чтобы добавить его JS-файл в мою папку assets и добавить путь к angular.json нему. 

 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/js/typer.js"
            ]

Моим следующим шагом было объявить a var в компоненте и попытаться вызвать его ngOnInit() .

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

declare var Typer: any;

@Component({
  selector: 'app-background',
  templateUrl: './background.component.html',
  styleUrls: ['./background.component.scss']
})
export class BackgroundComponent implements OnInit {

  rotate = false;

  constructor() { }

  ngOnInit() {
    this.rotate = !this.rotate;
    AOS.init();
    Typer.init();
  }

}

Я не получаю никаких ошибок, но это не работает. Кто-нибудь знает рабочий подход?

Комментарии:

1. Добавив его в scripts массив, angular.json вы убедитесь, что он загружен в ваше приложение и, скорее всего, в область окна. Но я не смог найти ни init() одного метода в документации typer. AFAIK это зависит только от имен классов typer и cursor .

2. а также, насколько я понимаю, библиотека typer должна экспортировать элементы, чтобы иметь возможность использовать ее в этом стиле импорта

Ответ №1:

Есть несколько вариантов, которые могут помочь. Стиль первого узла требует:

 var typer = require("typer");

Второй используйте его, как вы уже делали с aos:

 import * as typer from 'typer';

В этом случае вы должны быть уверены, что ваша .js библиотека может быть найдена. Вы добавили его в angular.js so, который должен работать.

В обоих случаях инициализация должна быть одинаковой: 

 ngOnInit() {
    this.rotate = !this.rotate;
    AOS.init();
    typer.init();
  }