Должен ли я использовать [innerHTML] или обычный способ (Угловой 2)

У меня есть example: string; в моем component.ts файлах. Я может выводить эту переменную двумя способами (по крайней мере, я знаю):Должен ли я использовать [innerHTML] или обычный способ (Угловой 2)

я могу сделать:

<p>{{ example }}</p>

и я могу сделать:

<p [innerHTML]="example"></p>

Ну, когда я использую В первую очередь моя IDE (phpStorm) сообщает мне, что мой var не нужен, потому что я никогда не использовал его. Но когда я использую второй способ, он говорит, что я использую его.

Имеет ли значение, какой метод использовать?

источник

2016-06-20 Eliya Cohen

Первый способ может привести к тому, что пользователь увидит буквальную строку «{{example}}» на короткое время, если страница загружена до того, как будет установлен пример. по этой причине второй метод лучше. – bryan60

Даже когда я использую Angular 2? –

afaik, если только пример не является фактическим html, вы должны использовать первый способ. innerHTML для фактической разметки html –

Per Угловое 2 Docs: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding-or-interpolation-

Там нет никаких технических причин предпочесть одну форму в другую. Мы наклоняем к читабельности, которая имеет тенденцию благоприятствовать интерполяции. Мы предлагаем установление правил стиля кодирования и выбор формы, которая соответствует правилам и наиболее естественна для этой задачи.

И, насколько будучи обеспокоен innerHTML, имеющие вредоносные скрипты в нем (еще одна причина, вы могли бы благоприятствовать interpoliation):

К счастью, угловые привязки данных на оповещения опасного HTML. Он дезактивирует значения перед их отображением.

Итак, это действительно зависит от вас. Угловая команда говорит, что они предпочитают {{ example }}, потому что ее легче читать, и я склонен согласиться с ними, но, похоже, вы можете идти в любом случае.

источник

2016-06-20 21:41:45

В IE Edge 41.16299.15.0 «null» отображается при использовании innerHTML в поле, которое не определено. Он не отображается, если вы используете интерполяцию или innerText. – keza

У моей IDE есть те же ограничения, что и у вас, и это раздражает. Будьте осторожны, однако, два варианта, которые вы представили, не совпадают. Если вы хотите сделать HTML-разметку (для добавления DOM элементов на странице), используйте:

<p [innerHTML]="example"></p>

Если вы планируете выводить только строки, не связываются с этим свойством. Либо использование интерполяции:

<p>{{ example }}</p>

Или связываются с innerText:

<p [innerText]="example"></p>

Чтобы доказать, что они разные, в компоненте, установите:

example = '<h3>Am I big?</h3>'

Затем в шаблоне, имеют обе деления:

<p [innerText]="example"></p> 
<p [innerHTML]="example"></p>

Вы увидите, что абзацы выглядят иначе :-)

источник

2016-06-21 01:15:43 BeetleJuice

Должен ли я использовать [innerHTML] или обычный способ (Угловой 2)

ответ

Смежные вопросы