从Angested中嵌套子级到父级组件的输出

时间:2017-07-28 09:17:57

标签: angular typescript input output

嗨角社区!

我的问题是我试图触发子输出来说明孩子打开或关闭的父母,但是父母也可以解雇孩子并以同样的方式输出它,有点像那个帖子加上格兰父How to use @output to fire a boolean from child to parent PS:请注意,孩子可能会被父母和父母解雇/躲起来......感谢他们寻求帮助,如果不清楚,请不要犹豫,向我询问详细信息。

gran parent.html:

<div class="daydetail">
 <img src="./assets/img/fold_down_black.png" class="clickdaydetail" type="button" label="Click"(click)="toggleChild()"/>
 <div><my-daydetail [showMePartially]="showVar"(close)="isHidden = true" (open)="isHidden = false"></my-daydetail></div>
  <div [hidden]="isHidden" >

     <div><app-pie-chart [minifiedMe]="showVar" ></app-pie-chart>
</div>
    <div><app-fonctionnaly [minifiedMe]="showVar"  ></app-fonctionnaly></div>
  </div> <!-- Fin de isHidden -->

parent.html:

<div *ngIf="showMePartially" class="daydetail2" > <!-- this part will be toggled by the parent component button  -->

 <img type="button" label="Click" (click)="hideDem()" id="foldup" src="./assets/img/fold_up_blacksmall.png"/>
  <span id="infonc">Informations sur le fonctionnement</span>
</div> <!-- Fin de daydetail2 -->
 <p class="taux2">Taux de fonctionnement sur la période</p>
 <img type="button" label="Click" (click)="hideDem2()" src="./assets/img/fold_up_blacksmall.png"/>
<app-my-verticalchart [showMePartially2]="showVar" (closed)="isHiddenn = true" (opened)="isHiddenn = false"></app-my-verticalchart>

parent.ts

@Input() showMePartially: boolean;
@Input() showMePartially2: boolean;
@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();
@Output() opened: EventEmitter<any> = new EventEmitter();
@Output() closed: EventEmitter<any> = new EventEmitter();

child.html

<div *ngIf="showMePartially2" class="chart2">

     <chart [options]="options" (load)="saveInstance($event.context)">
      <!--    <point (select)="onPointSelect($event)"></point> -->
      </chart>
<!--  <p><b>{{point}}</b><p> -->
</div>  <!-- ================ Fin de chart2 ================ -->

child.ts

 @Input() showMePartially2: boolean;

0 个答案:

没有答案