Angular2: привязка свойств от свойства внутри компонента

Question

Я смущен относительно разницы между этими двумя способами привязки данных.

В моем компоненте у меня есть свойство: stringInterpolation = This is string interpolation;

В моем HTML я связываю это свойство для значения атрибута в входе: <input type="text" value="{{stringInterpolation}}">

Я прочитал, что я могу связать свойство по-другому : <input type="text" [value]="stringInterpolation">, который выводит одно и то же значение внутри текстового поля.

Вот инспекции от Дев инструментов двух входов:

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

и

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

Они оба одинаковы.

Мой вопрос: Как value="{{stringInterpolation}} отличается от [value]="stringInterpolation"?

Answer 1

Они альтернативный способ оценки стоимости имущества

value={{stringInterpolation}} 

Выше будет оценивать {{}} интерполяции и добавить, что значение внутри value свойство DOM.

Где [value]="stringInterpolation" синтаксический сахар & небольшая многословная первая.

В Angular 2 он известен как привязка к объекту. Как правило, он имеет тенденцию использовать в Коммуникации с компонентами. И иногда для установки динамических значений для свойств DOM.

Свойство связывания значение атрибута имя обертку с [] & любое значение, указанное в свойстве binding получает оценку от текущего контекста компонента (this).

Помимо этого при компоновке компонента HTML на странице угловые добавляются динамические классы на каждый узел DOM _ngcontent-[someunique]-[somenumber]="", и то же самое применяется к правилу CSS, если вы добавили какой-либо компонент CSS для компонента. Этот дополнительный атрибут был добавлен в обоих случаях (CSS & и узел), чтобы убедиться, что компонентный CSS должен влиять только на текущий загруженный компонент (в зависимости от того, что вы установили в метаданных компонента).