Как прозрачно обернуть тег img в компонент? - PullRequest
Новая
       11

Как прозрачно обернуть тег img в компонент?

0 голосов
/ 04 сентября 2018

Я пытаюсь создать компонент, который обертывает тег img для абстрагирования библиотеки svg. Компонент выглядит так:

<app-glyphicon glyph="plus"></app-glyphicon>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-glyphicon',
  template: '<img [src]="src"/>'
})
export class GlyphiconComponent {
    public src = ''

    @Input() set glyph(value) {
        this.src = `https://glyphiconsource.com/${value}.svg`;
    }
}

Проблема в том, что <img /> элементы имеют нативное поведение, такое как height, width и т. Д., От которого хост-элемент его экранирует (потому что он оборачивает его). Я могу передать их, используя Input(), но другие вещи, такие как передача классов CSS, не работают.

При невозможности прямого расширения элемента <img>, как мне лучше всего обернуть тег в свой пользовательский элемент

...