Angular9 - Angular 2 компонент для szimek / signature_pad не определен

Question

Я пытаюсь заставить эту подпись работать. когда я пытаюсь создать его экземпляр, я получаю неопределенность. Модуль работает на angular 8 или менее, я полагаю, это может быть связано с совместимостью ES6. Кто-нибудь знает решение этой проблемы?

вот мой фрагмент кода (очень настойчиво) app.ts ==> ...

import { BidiModule } from '@angular/cdk/bidi';
import { HttpClientModule } from '@angular/common/http';
import { SignaturePadModule } from 'angular2-signaturepad';




@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BpensiaComponent,
    BmngComponent,
    BindiComponent,
    BpartComponent,
    BuniqComponent,
    BlogComponent,
    AboutusComponent,
    JoinformComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    BidiModule,
    AppRoutingModule,
    SharedModule.forRoot(),
    BrowserAnimationsModule,
    SignaturePadModule,

joinForm.ts ==>

import { Component, OnInit, ViewChild  } from "@angular/core";
import { SignaturePad } from 'angular2-signaturepad/signature-pad';


@Component({
  selector: "app-joinform",
  templateUrl: "./joinform.component.html",
  styleUrls: ["./joinform.component.scss"]
})
export class JoinformComponent implements OnInit {
  @ViewChild(SignaturePad, {static:false}) signaturePad: SignaturePad;
   signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }

Tnx заранее

Answer 1

В соответствии с проблемами репозитория Github, есть некоторые проблемы совместимости этой библиотеки с Ivy (новый механизм рендеринга Angular 9)

Исправление вашей проблемы - заменить следующую строку в вашем компоненте ( joinForm.ts).

import { SignaturePad } from 'angular2-signaturepad/signature-pad';

с

import { SignaturePad } from 'angular2-signaturepad;

Это решит проблему, и объект this.signaturePad будет доступен в ngAfterViewInit() function