如何在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>
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>
原因是事件名称的后缀'Change' visibleChange。如果属性绑定名称为“ x”，则事件绑定名称应为“ xChange”。只有在这种情况下，angular才能识别“盒中香蕉” [（）]语法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句