时间戳

首页 > 解决方案 > 如何在 Angular 8 应用程序中使用香草 JS 签名板？

javascript - 如何在 Angular 8 应用程序中使用香草 JS 签名板？

问题描述

我是 Angular 新手，在将 szimek/signature_pad 集成到我的应用程序时遇到问题。我已阅读有关如何在 Angular 2+ 应用程序中使用 JavaScript 库的文章，并且它们与我尝试过的其他库一起使用。但是，我无法让 signature_pad 工作。我知道签名板的角度版本，但是，我需要使用 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>

我尝试过的每件事都会导致错误。有人可以帮忙吗？

标签： javascriptangularnpm

解决方案

在一个新的 Angular 项目中让它工作对我来说并不难。

你的第一步是对的。使用 CLI 创建一个新的 Angular 应用程序并安装 signature_pad 库：

npm install --save signature_pad

注意，我没有安装类型库，但你没有理由不能。我不必将此库添加到 Angular.json，因为一旦我们导入它，Angular CLI 就会从 node_modules 自动将它包含在主应用程序中。

在我们进入打字稿之前，请确保您已在app.component.html. 我刚刚删除了所有默认值并添加了这个：

<canvas #canvas></canvas>

请注意，我将#canvas语法用作画布的一部分。这样我就可以在代码中访问它。

现在移动到您的app.component.ts文件。我将从上到下回顾我的变化。

首先，导入库，如下所示：

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 类，按照自述文件中的说明，将用于基础的 HTML 元素传递给它。我们通过内省nativeElement我们的ViewChild.

一旦我这样做了，一切都很好。

如果您愿意，您应该能够轻松地将这个库封装在一个 Angular 组件中，并且库中有许多 API 并没有用于本示例的目的。您需要深入研究lib repo 中的示例，以了解它们如何执行更改颜色、清除或保存签名等操作。

推荐阅读