Я разрабатываю компонент, и он используется внутри родительского компонента (поэтому мы можем назвать мой компонент дочерним компонентом в этом случае).
Мой компонент имеет свойство @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 не будет загружено в представление, вместо этого оно равно null / empty
<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, есть ли здесь какой-то определенный порядок или конфликт?
И, конечно, будет признателен, если кто-то может помочь указать причину моей проблемы?