angular2의 구성 요소에 문자열 값을 전달하는 방법

86

angular2의 구성 요소에 문자열 값을 전달하고 싶지만 기본 바인딩에서는 작동하지 않습니다. 나는 이것과 비슷한 것을 생각하고 있습니다.

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

불행히도 할당의 오른쪽에는 표현식 만 허용됩니다. 이를 수행하는 방법이 있습니까?

angular angular2-template

— 안드라스 하트 바니
소스

175

문자열 리터럴은 다른 방법으로 전달할 수 있습니다.

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

— Günter Zöchbauer
소스

1

그들 사이에 차이점이 있습니까? 예를 들어 Angular가 마지막 두 경우에 "바인딩"을 생성합니까 아니면 충분히 똑똑합니까?

— Alexander Abakumov

Angular는 충분히 똑똑합니다. 첫 번째 항목 만 DOM에 표시됩니다.

— Günter Zöchbauer

1

감사. 나는 중첩 된 따옴표없이 통과되었다 그것은 NaN이 같은 값을 반환했다 : <component [inputField]='string'></component>

— 에릭 Soyke

기술적으로는 옵션 1과 3을 제안하지 않습니다. 여기에는 문자 그대로 구성 요소의 속성과 값은 물론 해당 값을 활용할 수있는 구성 요소 내의 모든 요소가 포함됩니다. 예에서는 id="example-id"원하는 올바른 문자열을 전달하지만 이제 동일한 id속성을 가진 2 개의 요소가 있습니다 . ... 현명하게이 방법을 사용

— mrtpain

50

문자열을 따옴표로 묶어 문자열을 전달할 수 있습니다.

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

— 에릭 마르티네즈
소스

3

문자열 리터럴에 작은 따옴표 (및 기타 특수 HTML 문자)를 포함하려면 첫 번째 옵션이 작동하지만 작은 따옴표를 사용하여 리터럴을 래핑하는 옵션은 구문 분석 오류로 실패합니다. 예를 들면 :

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

"John 's Value"를 올바르게 출력합니다.

— Glenn
소스