如何使用@output从子级向父级触发布尔值 [英] How to use @output to fire a boolean from child to parent

问题描述

角社区，

我想使用@Output触发事件来隐藏或打开/关闭包含其他组件的div.这很简单，但是我以前从未使用过EventEmitter，所以我想将hideDem称为隐藏或打开/关闭div，具体取决于child.ts的其他属性.

I want to fire an Event using @Output to hide or open/close a div containing others components. It's quite simple but I never use EventEmitter before, so i would like when hideDem is called it hide or open/close the div depending on other propreties comming from the child.ts

child.html:

child.html:

 <img type="button" label="Click" (click)="hideDem()" id="foldup" src="./assets/img/fold_up_blacksmall.png"/>

child.comp.ts:

child.comp.ts:

@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();

public hideDem(): void {
  this.hideMePartially = !this.hideMePartially;
  if (this.hideMePartially) {
    this.open.emit(true);
  } else {
    this.close.emit(false);
  }
}

parent.comp.html

parent.comp.html

 <div class="daydetail"> 
<div><my-daydetail [showMePartially]="showVar" ></my-daydetail></div>
  <div [hidden]="(close)=hideDem($event)">
    <div>
       <app-pie-chart [minifiedMe]="hideMeup" ></app-pie-chart>
     </div>
     <div>
       <app-fonctionnaly [minifiedMe]="hideMeup"></app-fonctionnaly>
     </div>
     <div>
       <app-my-verticalchart [minifiedMe]="hideMeup" ></app-my-verticalchart>
     </div>
     <div>
       <app-dysfonction [showMePartially]="hideVar"></app-dysfonction>
     </div>
   </div> <!-- End of hidden-->
</div> <!-- End of daydetail-->

推荐答案

[hidden]="(close)=hideDem($event)"

是无效的标记. (close)不能在另一个绑定的表达式内.

is invalid markup. (close) can't be inside the expression of another binding.

<my-daydetail [showMePartially]="showVar" 
    (close)="isHidden = true" (open)="isHidden = false"></my-daydetail>
  <div [hidden]="isHidden">

这篇关于如何使用@output从子级向父级触发布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！