angular2更改子组件中的@input值然后更改父组件中的此值不起作用

发布时间：2020-12-17 08:52:24 所属栏目：安全来源：网络整理

导读：父组件类 export class Parent { show: boolean = false; constructor() { } showChild() { this.show = true; }} 父组件模板 child [isShow]="show"/child 子组件类 export class Child { @Input isShow: boolean = false; constructor() { } onClick() { t

父组件类

export class Parent {
   show: boolean = false;
   constructor() { }
   showChild() {
      this.show = true;
   }
}

父组件模板

<child [isShow]="show"></child>

子组件类

export class Child {
   @Input isShow: boolean = false;
   constructor() { }
   onClick() {
      this.isShow = false;
    }
}

在我触发子组件中的onClick()后,showChild()无法显示子组件.

为什么？

由于您使用的是方括号,因此该值仅从父级传递给子级.

为了使值双向,您需要使用双向数据绑定.

这意味着你的isShow属性应该是这样的：

@Input()  isShow: boolean;
@Output() isShowChange = new EventEmitter<boolean>();

模板应该是

<child [(isShow)]="show"></child>

要么

<child [isShow]="show" (isShowChange)="show = $event"></child>

看一下双向数据绑定教程页面：

https://angular.io/guide/template-syntax#two-way-binding—

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!