преобразование атрибута camelCase в строчные буквы html в привязке Angular inner Html - PullRequest
Новая
       59

преобразование атрибута camelCase в строчные буквы html в привязке Angular inner Html

1 голос
/ 18 марта 2020

В моем компоненте есть литеральная строка шаблона, содержащая тег HTML с атрибутом camelCase: 

htmlString = `<mat-icon svgIcon="edit" ...></mat-icon>`;

Эта строка собирается как свойство объекта в массиве forEach l oop.

По нескольким причинам в шаблоне мне нужно вывести это во внутренний атрибут Html внутри * ngFor l oop: 

<li *ngFor="let foo of foos" [innerHTML]="foo.htmlString"></li>

(Это упрощенный Пример кода моей реализации.)

Я обнаружил, что в выводе атрибут svgIcon отображается в нижнем регистре svgicon, см. вывод инспектора DOM: 

<li _ngcontent-qui-c96="">
  <mat-icon svgicon="edit"></mat-icon>
</li>

Ошибка или функция ? Не удалось найти информацию об этом поведении. Спасибо за любую подсказку!

1 Ответ

1 голос
/ 18 марта 2020

Атрибуты действительно преобразуются в нижний регистр на Angular, не беспокойтесь об этом.

Кроме того, вопрос, который вы поднимаете как побочный эффект, интересен и может потребовать некоторого объяснения: вы используете innerHtml с компонентом Angular (mat-icon, это не стандартный тег HTML).

Так или иначе, он потерпит неудачу: веб-браузер не знает, как отобразить mat-icon.

Чтобы визуализировать mat-icon, он должен go через механизм шаблонов Angular: Angular увидит mat-icon и получит определение / шаблон компонента и отобразите его в HTML терминах (DOM), чтобы браузер мог его понять.

Как правило, в вашем случае вы должны использовать: 

<li *ngFor="let foo of foos">
  <mat-icon [svgIcon]="foo.icon" ...></mat-icon>
</li>

А если ваши компоненты более сложные, вы можно исследовать, используя контентную проекцию с ng-content.

...