Как визуализировать HTML-элемент, являющийся переменной в компоненте Angular 2

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.

Как я могу бороться с Угловым 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 
    } 
}