Как использовать vanilla JS Signature Pad с приложением Angular 8?

Question

Я новичок в Angular, и у меня проблемы с интеграцией szimek / signature_pad в мое приложение. Я читал статьи о том, как использовать библиотеки JavaScript в приложениях Angular 2+, и они работали с другими библиотеками, которые я пробовал. Однако я не могу заставить работать signature_pad. Мне известны angular версии планшета для подписи, однако я должен использовать версию JavaScript.

Шаги, которые я предпринял:

npm install --save signature_pad

npm install --save @types/signature_pad

import * as _signaturePad from 'signature_pad';  in app.component.ts

"scripts": ["src/app/js/signature_pad.js"] в angular. json

<script src="./app/js/signature_pad.js"></script>

Все, что я пробовал, приводит к ошибке. Может кто-нибудь помочь?

Answer 1

Мне было нетрудно заставить это работать в новом проекте Angular.

Первые шаги вы сделали правильно. Создайте новое приложение Angular с помощью интерфейса командной строки и установите библиотеку signature_pad:

npm install --save signature_pad

Обратите внимание, я не устанавливал библиотеку типов, но нет причин, по которым вы не можете этого сделать. Мне не нужно было добавлять эту библиотеку в Angular. json, потому что Angular CLI включит ее в основное приложение автоматически из node_modules, как только мы ее импортируем.

Прежде чем мы перейдем к Машинопись, убедитесь, что у вас настроен холст в app.component.html. Я просто удалил все значения по умолчанию и добавил это:

<canvas #canvas></canvas>

Обратите внимание, что я использую синтаксис #canvas как часть холста. Это так, чтобы я мог получить к нему доступ в коде.

Теперь перейдите к вашему файлу app.component.ts. Я go внесу свои изменения сверху вниз.

Сначала импортирую библиотеку, например:

import SignaturePad from 'signature_pad';

Затем убедитесь, что класс реализует интерфейс OnInit . Для этого вам понадобится импорт:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

И вам нужно будет добавить текст орудий после определения класса AppComponent:

export class AppComponent implements OnInit {

Теперь внутри класса компонента, создайте переменную экземпляра для панели подписи:

  public signaturePad: SignaturePad;

Создайте ViewChild для холста:

  @ViewChild('canvas', {static: true }) public canvas: ElementRef;

И, наконец, добавьте метод ngOnInit():

  ngOnInit() {
    this.signaturePad = new SignaturePad(this.canvas.nativeElement);
  }

Метод ngOnInit() инициализирует класс SignaturePad, в соответствии с инструкциями в read me , передавая ему элемент HTML, который будет использоваться для базы. Мы добились этого, изучив nativeElement на нашем ViewChild.

Как только я это сделал, все заработало.

Вы сможете легко обернуть эту библиотеку в Angular компонент, если хотите, и в библиотеке есть множество API, которые я не использовал для целей этого примера. Вам нужно будет изучить образец из репозитория библиотеки , чтобы увидеть, как они делают такие вещи, как изменение цвета, очистка или сохранение подписи.