Каков порядок установки свойства Input компонента Angular и привязки ngModel?

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

Мой компонент имеет свойство @Input с именем selectedValue,

Он также использует ngModel привязка (потому что контекст использования находится в форме). NgModel связывается со свойством модели родительского компонента.

я хочу ngModel изменение значения обновит мой компонент selectedValue свойство (это делается путем реализации ControlValueAccessor и функции writeValue).

На виде компонента он покажет значение selectedValue,

Краткое содержание кода:

<parent-component ...>
   <my-child-component
      [(ngModel)]="parentModel.propertyMyComponentNeedToBind"
      [selectedValue]="defaultValue">
   </my-child-component>
</parent-component>

Реализация ControlValueAccessor

writeValue(value) {
   this.selectedValue = value:
}

Моя текущая проблема связана с редактированием (загрузкой существующих данных):

  • Если я не установлю [selectedValue] для компонента в шаблоне представления, то ожидаемое значение от ngModel не будет загружен в представление, вместо этого он пуст / пуст
<parent-component ...>
   <my-child-component
      [(ngModel)]="parentModel.propertyMyComponentNeedToBind"
      **does not have [selectedValue] here**>
   </my-child-component>
</parent-component>
  • Однако, если я установлю [selectedValue] для компонента в шаблоне представления (как в приведенном выше резюме кода), он может загрузить ngModel данные для представления

Итак, я думаю, при настройке @Input property вместе с ngModel из шаблона, есть ли определенный порядок угловых процессов, которые один перед другим? И особенно, как в моем случае, когда изменение ngModel также приведет к обновлению свойства @Input, есть ли здесь какой-то определенный порядок или конфликт?

И, конечно, будет признателен, если кто-то может помочь указать причину моей проблемы?

0 ответов

Другие вопросы по тегам