Question

我希望有一个组件可以呈现包含图像或视频的任意数量的canvas元素。有时会有一个图像。其他时候我想要两个或三个并排。也许有一个按钮可以在一个或两个图像之间切换。

所以我的组件看起来大致如下：

@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]。

还是有更好的方法来处理这一整个过程吗？

Answer 1

您只需使用<div *ngFor="let canvas of canvases">...</div>，而不是<canvas myCanvasDirective *ngFor="let canvas of canvases" [inputs ...]></canvas>。然后，您可以编写一个指令，处理如何根据您发送的输入呈现每个画布。

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[myCanvasDirective]' })
export class MyCanvasDirective {
    constructor(el: ElementRef) {
        const canvas: HTMLCanvasElement = el.nativeElement;
        // Do all the canvas context and drawing stuff here
    }
}

如何呈现作为Angular 2组件中的变量的HTML元素

1 个答案: