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

Question

我希望有一个组件，可以呈现任意数量包含图像或视频等内容的画布元素。有时可能只有一张图片，而其他时候可能想要两个或三个并排展示。也许还需要一个按钮来在一张和两张图片之间切换。

因此，我的组件大致如下：

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

还是有更好的方法来处理整个事情吗？

- freethebees

Answer 1

可以使用<canvas myCanvasDirective *ngFor="let canvas of canvases" [inputs ...]></canvas>代替<div *ngFor="let canvas of canvases">...</div>。然后，您可以编写一个指令来处理基于您发送的输入如何呈现每个画布。

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
    }
}

- freethebees