Question

我的问题是，每次使用toggleSubChild()装饰器调用@Output函数时，我会用“子子组件”替换/隐藏一些子组件（Child1,2和3）（这只是一个想法，也许有更好的方法来做到这一点）;因此，每次调用subChild时，它都会使用EventEmitter值open / close从父组件中删除Child1,2和3。所以层次结构是Parent ==＆gt; Child1 2和3 ==＆gt; SubChild 我希望我足够清楚......如果没有任何问题，请提前...谢谢你的帮助..

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;

使用@Output隐藏到某个子组件

0 个答案: