时间戳

首页 > 解决方案 > @ViewChild 在 Angular 组件中未定义，使用 angular2-signaturepad 库

angular - @ViewChild 在 Angular 组件中未定义，使用 angular2-signaturepad 库

问题描述

我正在开发一个 Angular 项目angular2-signaturepad。我试图访问模板中的一个组件，所以我创建了一个@ViewChild。但是当我尝试使用它时，它是未定义的。

这是相关的html片段：

<signature-pad [options]="options" (onBeginEvent)="drawBegin()" (onEndEvent)="drawComplete()"></signature-pad>

这是打字稿文件的片段：

@ViewChild(SignaturePad, {static: true}) public signaturePad: SignaturePad;

由于this.signaturepad未定义，我无法调用我需要的任何函数。谁能帮我这个？

标签： angular

解决方案

这里可能会发生一些事情。

您可能试图在 ViewChild 存在之前访问它。ViewChildren 将在ngAfterViewInit被调用之前被解析（更多关于生命周期事件的信息在这里），所以你只能保证它是在那个函数中定义的。例如：

export class MyComponent implements AfterViewInit, OnChanges {
    @ViewChild(SignaturePad, {static: true}) public signaturePad: SignaturePad;

    constructor() {
        console.log(this.signaturePad); // always undefined
    }

    ngOnChanges(changes) {
        console.log(this.signaturePad); // sometimes undefined, sometimes defined
    }

    ngAfterViewInit() {
        console.log(this.signaturePad); // defined!
    }

可能发生的另一件事是使用static: true，这意味着 ViewChild 将在更改检测之前解决（有关 ViewChild 的更多信息here）。这意味着，如果<signature-pad>嵌套在另一个恰好是有条件的元素内，那么 ViewChild 将不会被解析。例如：

<div *ngIf="allowEdit" class="my-container">
    <signature-pad ...></signature-pad>
</div>

然后在类中，不会定义 ViewChild

ngAfterViewInit() {
    console.log(this.signaturePad); // undefined
}

如果这是您的情况，那么更改{static: true}为{static: false}应该解决它

推荐阅读