来自位于 ngFor 内的兄弟组件的角度切换布尔变量

Posted 2023-02-18

【中文标题】来自位于 ngFor 内的兄弟组件的角度切换布尔变量

【英文标题】：Angular toggle boolean variable from sibling components located inside an ngFor

【发布时间】：2022-01-21 05:33:44

【问题描述】：

案例如下，一个ngFor渲染一个组件集合（app-item）。每个组件都有一个名为“open”的布尔变量和一个名为“toggle”的函数，用于切换（true 或 false）变量。

如何单击组件（app-item）的按钮并更改剩余迭代兄弟项的状态？

app-page.component.html

<div *ngFor="let item of items">
  <app-item [data]="item"></app-item>
</div>

app-item.component.html

<button (click)="toggle($event)">Toggle "open" variable.</button>
<div *ngIf="open">Content is now visible</div>

app-item.component.ts

export class ItemComponent     
  open: boolean = false;

  toggle(event: any) 
     this.open = !this.open;
  

【参考方案1】：

我认为你有 3 个选项

在 app-item-component 中使用 @Output() 并向父组件发出事件，然后通过 @Input() 设置更改所有组件状态

使用服务并在其中创建主题并订阅子组件

将属性字段作为布尔值添加到您的项目模型中，并通过子组件或父组件中的引用来更改它