Angular 使用@Output隐藏某些子组件

我的问题是每次使用

@Output

decorator调用

toggleSubChild（）

函数时，我都会用“subchild组件”替换/隐藏一些子组件（Child1、2和3）（这只是一个想法，也许有更好的方法）；因此，每次调用子child时，它都会使用EventEmitter值open/close从父组件中删除Child1、2和3。 所以层次结构是Parent==>child12和3==>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>

child1.html：

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

---

这是一种嵌套的父子关系，对于这种情况，您可以使用更易于管理和更干净的redux或共享服务。你会发现关于这两个主题的信息，他们有专门的静默listed@RahulSingh是的你说得对我在找Redux。。。感谢您的帮助，我将仔细阅读您的主题如果需要任何建议，请在此处发表意见，我将很乐意提供帮助ngrx所做的是，所有数据将存储在一个地方，而不是您将其传递给家长和孩子及其孩子。更新后，您只需将数据传递到存储。存储区将发出值，该值将通知子级或其子级您在哪里向存储区订阅过内容。您需要将reducer设置为布尔值，其中初始状态为true，然后在操作中将状态设置为false，然后观察其值。然后做一个商店。选择（'counter'）；

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

@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);
   }

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

@Input() hideMePartially: boolean;