Як передати значення рядка компоненту в 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>

Правильно виведе "Значення Джона".

— Гленн
джерело