Как передать строковое значение компоненту в angular2

86

Я хотел бы передать строковое значение компоненту в angular2, но оно не работает с привязкой по умолчанию. Я думаю о чем-то похожем на это:

<component [inputField]="string"></component>

К сожалению, в правой части задания разрешены только выражения. Есть ли способ сделать это?

angular angular2-template

— Андраш Хатвани
источник

174

Строковые литералы можно передавать по-разному:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— Гюнтер Цохбауэр
источник

1

Есть ли между ними разница? Например, будет ли Angular создавать «привязки» в последних двух случаях или это достаточно умно?

— Александр Абакумов

Angular достаточно умен. В DOM будет виден только первый.

— Günter Zöchbauer

1

Спасибо. Я проходил без вложенных кавычек, и он возвращал значение как NaN: <component [inputField]='string'></component>

— Эрик Сойк,

Технически я бы не предлагал варианты 1 и 3. Они буквально будут включать эти атрибуты и значения в элементе компонента, а также любые элементы в компоненте, которые могут использовать эти значения. В примере id="example-id"передается правильная желаемая строка, однако теперь будет 2 элемента с одинаковым idатрибутом. Используйте этот подход с умом ...

— mrtpain

50

Вы можете передать строку, заключив ее в кавычки

<component [inputField]="'string'"></component>

— Эрик Мартинес
источник

3

Чтобы включить одинарную кавычку (и, возможно, другие специальные символы HTML) в строковый литерал, первый вариант работает, в то время как те, которые используют одинарные кавычки для переноса литерала, терпят неудачу с ошибками синтаксического анализа. Например:

<component inputField="John&#39;s Value"></component>

Правильно выведет "John's Value".

— Гленн
источник