В Angular, как заставить пользовательский компонент иметь [(ngModel)] с простым флагом, примененным к нему?

Question

В Angular, как сделать, чтобы пользовательский компонент с простым шаблоном имел к нему [(ngModel)]?Я хочу, чтобы этот [(ngModel)] был простым логическим флагом.Эта ngModel будет изменена после нажатия на div.Какой минимальный код должен быть добавлен к уже существующему компоненту?

Answer 1

Я не совсем понимаю необходимость [(ngModel)] Если вы хотите двунаправленно связать логическое значение в и из вашего компонента, предложите угловое двустороннее связывание https://angular.io/guide/template-syntax#two-way-binding---

в вашем случае логического флага:

@Input()  flag: boolean| string;
@Output() flagChange = new EventEmitter<boolean>();
changeFlag() {
  this.flag = !this.flag;
  this.flagChange.emit(this.flag);
}

в соответствующем родительском компоненте вы можете использовать это свойство с тем же синтаксисом, что и [(ngModel)]:

[(flag)]

[(ngModel)] является сахаром для свойства [ngModel] и события (ngModelChange).