如何使用@output 触发从子级到父级的布尔值答案

【问题标题】：How to use @output to fire a boolean from child to parent如何使用@output 触发从子级到父级的布尔值
【发布时间】：2017-07-26 09:37:00
【问题描述】：

嗨 Angular 社区，

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

child.html：

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

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

 <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-->

【问题讨论】：

标签： angular output

【解决方案1】：

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

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

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

【讨论】：

感谢帮助我，当我使用 <div [hidden]="isHidden" (close)="hideDem($event)"> 时，控制台中没有错误，但我没有将组件隐藏在 div 中。知道为什么吗？
究竟应该隐藏什么元素，究竟应该隐藏什么元素？
app-fonctionnaly、app-my-verticalchart 和 app-dysfonction 当我单击 child.html 中的按钮时应该隐藏按钮看起来像这样 ==>
child.comp 的选择器是什么？
哇，非常感谢 Günter 这不是你第一次把我从一个大洞里放出来......我已经在那里待了将近一周！下次我经过德国时，我会给你带来一大瓶波尔多！