如何解决Angular 与不尊重 OnChanges 的画布元素相结合
查看此堆栈闪电战:https://stackblitz.com/edit/angular-ivy-wecw7p?file=src%2Fapp%2Fcanvas%2Fcanvas.component.ts
我有一个包含子 CanvasComponent 的常规 AppComponent(使用“和弦”选择器)。 app 组件创建一个 Chord 对象并将其传递给子画布组件:
<chord [chord]=chordData></chord>
Chord
接口目前只有一个 Name
字符串属性,该名称使用 <input>
字段显示在 AppComponent 中,并使用 {{ 在画布组件中呈现1}}。
到目前为止,一切都很好。
在我的画布组件中,我还渲染了一个 {{chord.Name}}
元素并在其中显示和弦名称。
<canvas>
问题是,当我使用输入字段更新和弦名称时,画布组件中的名称也会发生变化,但不会在画布元素内发生变化。
这是因为画布需要重新绘制,足够公平。我已经实现了 import {
Component,ViewChild,Input,ElementRef,OnChanges,SimpleChanges
} from '@angular/core';
import { Chord } from '../models/Chord';
@Component({
selector: 'chord',template:
'<div *ngIf="chord">{{chord.Name}}<br/><br/><canvas #canvas width=100 height=100></canvas></div>',styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnChanges {
@input() chord: Chord | undefined;
@ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement> | undefined;
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
console.log('changes in canvas');
this.draw();
}
ngAfterViewInit(): void {
this.draw();
}
private draw(): void {
if (this.canvas) {
let elmnt = this.canvas.nativeElement;
let ctx = elmnt.getContext('2d');
if (ctx && this.chord) {
ctx.fillStyle = '#dddddd';
ctx.fillRect(0,100,100);
ctx.fillStyle = '#000000';
ctx.font = '20px Arial';
ctx.fillText(this.chord.Name,20,40);
}
}
}
}
,我将需要重新绘制我的画布,但它没有以任何方式被击中。
如何确保在更新父 Chord 对象时,画布也会重绘?
也欢迎任何有关代码改进的提示,刚开始使用 Angular :)
解决方法
方法 ngOnChanges 不会被触发,因为和弦输入值永远不会改变。当您更新名称时,您可能只是在 Chord 对象上设置属性,而不是更改对象本身。 Angular 不会捕捉到那个变化,因为它仍然是同一个对象。
如果您只是将名称作为输入传递,那么应该可以正常工作,并且您应该会看到更新,因为字符串是不可变的,并且会创建一个新对象。或者,当外部组件中的输入值发生变化时,您可以使用对象扩展语法更新和弦的值:this.chordOuter = { ...this.chordOuter };
。这应该会导致为 chord 属性设置一个新值。
传播示例
class OuterComponent {
chord: Chord = {};
updateChord(partial: Partial<Chord>): void {
this.chord = { ...this.chord,...partial };
}
}
模板
<input [ngModel]="chord.name" (ngModelChange)="updateChord({ name: $event })" />
<chord [chord]="chord"></chord>
反应形式
如果您打算使用响应式表单,您可以从 valueChanges 创建一个 observable,然后使用 async 管道将其绑定到您的组件。
class OuterComponent {
readonly form = new FormGroup({ name: new FormControl('') });
readonly chord$ = this.form.valueChanges.pipe(map(x => this.convertToChord(x)));
private convertToChord(value: any): Chord {
/* Implement this yourself */
}
}
模板
<chord [chord]="chord$ | async"></chord>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。