在 Angular 中，如何使自定义组件具有 [(ngModel)] 并应用了一个简单的标志？

Question

在Angular中，如何制作模板为简单的自定义组件并应用[(ngModel)]？我希望这个 [(ngModel)] 是一个简单的布尔标志。单击 div 将更改此 ngModel。要添加到现有组件的最少代码是多少？

Answer 1

我不太明白 [(ngModel)] 的必要性如果你想双向绑定一个布尔值进出你的组件，建议 Angular Two-Way-Binding 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) 事件的糖。

在 Angular 中，如何使自定义组件具有 [(ngModel)] 并应用了一个简单的标志？

In Angular, how to make a custom component have [(ngModel)] with a simple flag applied to it?

custom-component

ngmodel

angular