Output from nested child to parent to grand-parent component in Angular

问题

Hi angular community !

My issue is that i am tried to fired the child output to say the gran parent that the child is open or close but the parent could also fired the child and output it same way, it a bit like that post plus the gran parent How to use @output to fire a boolean from child to parent PS: Note that the child could be fired/hide from the parent and the gran parent..thanks for help and if it's not clear don't hesitate to ask me for details..

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;

来源：https://stackoverflow.com/questions/45369561/output-from-nested-child-to-parent-to-grand-parent-component-in-angular

标签

angular

typescript

input

output