我希望有一个组件,可以呈现任意数量包含图像或视频等内容的画布元素。有时可能只有一张图片,而其他时候可能想要两个或三个并排展示。也许还需要一个按钮来在一张和两张图片之间切换。
因此,我的组件大致如下:
因此,我的组件大致如下:
@Component({
selector: 'canvas-container',
template: `<div *ngFor="let canvas of canvases">???</div>`
})
export class CanvasContainerComponent {
canvases: HTMLCanvasElement[] = [];
addCanvas(image) {
const canvas = <HTMLCanvasElement> document.createElement('canvas');
// some stuff to do with sizing and drawing
this.canvases.push(canvas);
}
}
因此,另一个组件将调用addCanvas
方法,或者画布将作为@Input
传递。
我该如何处理Angular 2,以渲染存储为HTMLCanvasElement变量的这些画布?使用{{canvas}}
只会显示元素的字符串形式:[object HTMLCanvasElement]
。
还是有更好的方法来处理整个事情吗?