Using @Output hide to some child component

问题

My issue is I would replace/hide some child components (Child1, 2 and 3) by a "subchild component" each time the toggleSubChild() function is called using @Output decorator (it's just an idea, maybe there's better way to do that); So each time the subChild is called then it delete the Child1, 2 and 3 from the parent component using the EventEmitter value open/close. So the hierarchy is Parent ==> Child1 2 and 3 ==> SubChild I hope I'm clear enough..if not feel free to ask..thanks in advance for the help..

parent.html:

<div><button (click)="toggleChild"></button>
  <div [hidden]="hideMePartially">
   <child1 [toggleMe]="toggleVar"></child1>
   <child2 [toggleMe]="toggleVar"></child2>
   <child3 [toggleMe]="toggleVar"></child3>
  </div>
</div>

parent.ts:

toggleChild() {
    this.toggleVar = !this.toggleVar;
}

child1.html:

<div ngIf*="toggleMe">
 <button (click)="toggleSubChild"></button>
 <subChild [hideMePartially]="hideItUp"></subChild>
<div>

child1.ts:

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

 toggleSubChild() {
     this.hideMePartially = !this.hideMePartially;
     if (this.hideMePartially) {
       this.open.emit(null);
    } else {
      this.close.emit(null);
    }
    console.log(open);
    console.log(close);
   }

subChild.html:

<span *ngIf="hideMePartially">Some content</span>

subChild.ts:

@Input() hideMePartially: boolean;

来源：https://stackoverflow.com/questions/45285481/using-output-hide-to-some-child-component

标签

angular

typescript

eventemitter