Как передать строковое значение компоненту в 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".

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