Angular：子组件中自定义输入的2路数据绑定答案

【问题标题】：Angular: 2 way data binding for a custom input in a child componentAngular：子组件中自定义输入的2路数据绑定
【发布时间】：2020-01-25 13:58:09
【问题描述】：

如何在 Angular 8 中为子组件中的自定义输入进行 2 路数据绑定？

我使用了banana-in-a-box [(...)] 语法，但它不会使子组件的更改在父组件中可见。

在结果中，它应该使用香蕉盒中的语法。

parent.component.ts

...
public childVisibility: boolean = true;
...

parent.component.html

childVisibility : {{childVisibility}}

<app-child-component [(visible)]="childVisibility">
</app-child-component>

child.component.ts

@Component({
  selector: 'app-child-component',
  templateUrl: './app-child.component.html',
  styleUrls: ['./global-search-results.component.scss']
})
export class ChildComponent {
  @Input() visible: boolean;

  constructor() {}

  public changeVisible() { 
    this.visible = false;
  }
}

child.component.html

<button (click)="changeVisible()">
  Change Visible
</button>

【问题讨论】：

stackoverflow.com/questions/42006770/…的可能重复
可以请您在这里尝试做什么>>尝试接受作为输入或作为输出发出
Angular2 Component @Input two way binding的可能重复

标签： angular 2-way-object-databinding

【解决方案1】：

试试这样：

child.component.ts：

@Output() visibleChange = new EventEmitter();

public makeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible)
}

parent.component.html

<app-child-component [(visible)]="childVisibility" >
</app-child-component>

Working Demo

【讨论】：

不错的自定义示例，但您忘记了 visible 和 visibleChange 之间命名的依赖关系。我的意思是下一个：@Input() visible: boolean; @Output() visibleChange = new EventEmitter<boolean>();
哪个依赖？
原因是事件名称 visibleChange 中的后缀“Change”。我是说这个。

【解决方案2】：

child.component.ts

@Input()  visible: boolean;
@Output() visibleChange = new EventEmitter<boolean>();

public changeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible);
}

parent.component.html

<app-child-component [(visible)]="childVisibility">
</app-child-component>

这里的原因是事件名称visibleChange 中的后缀“更改”。如果属性绑定名称为“x”，则事件绑定名称应为“xChange”。只有这样 Angular 才能识别banana-in-a-box [()] 语法。

详细示例：http://embed.plnkr.co/Jcu0iNkaUeRF7KEF7wA4/

【讨论】：