时间戳

首页 > 解决方案 > Angular: angular-resizable-element library 验证问题

angular - Angular: angular-resizable-element library 验证问题

问题描述

嗨，我无法读取 Validate 函数中的范围变量，也找不到任何有关它的文档，您有什么解决方案吗？

  export class StepComponent   {    
    maxwidth = 500;

    onResizeEnd(event: ResizeEvent): void {
        console.log(this.maxwidth); // it works
    }

    validate(event: ResizeEvent): boolean {                  
        console.log(this.maxwidth); // undefined            
        if (event.rectangle.width > this.maxwidth) {            
            return false;
        }
        return true;
    }

}

<div mwlResizable [enableGhostResize]="true"
    [validateResize]="validate"
    (resizeEnd)="onResizeEnd($event)">
</div>

标签： angulartypescript

解决方案

它正在打印undefined，因为它试图在指令中查找maxWidth属性。Resizeable您需要将current对象 ( StepComponent) 的正确范围发送到指令输入。

这应该工作[validateResize]="validate.bind(this)"

<div mwlResizable [enableGhostResize]="true"
    [validateResize]="validate.bind(this)"
    (resizeEnd)="onResizeEnd($event)">
</div>

推荐阅读