如何从模型数据设置Angular组件的Canvas尺寸

问题原因 #

Canvas元素的width属性是数值类型，代表画布的实际像素尺寸，不需要带px单位。你之前传入带px的字符串，不符合Canvas属性的预期格式，导致绑定失效。

方案一：直接绑定数值类型的Input（推荐） #

1. 修改子组件TS代码，将Input定义为数值类型：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-your-canvas',
  templateUrl: './your-canvas.component.html'
})
export class YourCanvasComponent {
  @Input() displayCanvasWidth = 800; // 默认值800像素，无需带px
}

2. 在HTML中使用属性绑定[width]传入数值：

<canvas #canvas [width]="displayCanvasWidth" height="600" class="baseCanvas"></canvas>

3. 父组件传入时直接传数字即可：

<app-your-canvas [displayCanvasWidth]="1000"></app-your-canvas>

方案二：兼容带px的字符串输入 #

如果父组件必须传入带px的字符串（比如"800px"），可以在子组件中做转换处理：

1. 子组件TS代码添加setter/getter处理字符串：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-your-canvas',
  templateUrl: './your-canvas.component.html'
})
export class YourCanvasComponent {
  private _canvasWidth = 800;

  @Input() set displayCanvasWidth_px(value: string) {
    // 提取字符串中的数字部分，转换为数值
    const parsedWidth = parseInt(value, 10);
    this._canvasWidth = isNaN(parsedWidth) ? 800 : parsedWidth;
  }

  get canvasWidth(): number {
    return this._canvasWidth;
  }
}

2. HTML中绑定处理后的数值：

<canvas #canvas [width]="canvasWidth" height="600" class="baseCanvas"></canvas>

3. 父组件传入带px的字符串：

<app-your-canvas displayCanvasWidth_px="1200px"></app-your-canvas>

内容的提问来源于stack exchange，提问作者gnitsuk