在Angular 4中单击时从相同的兄弟组件更改属性

Posted 2023-02-23

【中文标题】在Angular 4中单击时从相同的兄弟组件更改属性

【英文标题】：Change property from SAME sibling components on click in Angular 4

【发布时间】：2018-03-27 21:45:49

【问题描述】：

我有一个父组件，并且在该组件中，多次包含其他 1 个组件。

结构：

父组件：

<table>
  <tr class="">
    <td>buttons</td>
  </tr>
  <tr app-myComp></tr>
  <tr app-myComp></tr>
  <tr app-myComp></tr>
  <tr app-myComp></tr>
</table>

子 (myComp) 组件：

@Component(
selector: 'tr[app-myComp]',
template: `
                <td><button [style.color]="myColor" (click)="changeColor()">changeColor</button></td>    
            `
)

export class MyComponent 

myColor: string = "blue";

changeColor(): void
    this.myColor = "red"

当我点击按钮时，按钮的文字颜色从蓝色变为红色。

但我的问题是如何将仅单击按钮的文本颜色更改为红色并将所有其他按钮的文本颜色重置为蓝色？

我知道我可以通过@ViewChildren 获取 MyComponent 列表，但我如何使用它们将按钮的文本颜色重置为蓝色，除非单击一个。

我正在使用角度 4.3.4

codepen 链接：Angular 4 app

【参考方案1】：

您需要在父组件上添加一个属性，并将其赋值给被点击的子组件的索引。每次单击子项时更改其值并将其作为布尔值 @Input 传递给子项（如果属性值等于子项的索引，则为 true，则为 false，在相反的条件下）。在子组件中添加一个条件以检查 @Input 并仅在该条件下设置颜色。并且对于子索引跟踪，添加 *ngFor 而不是重复硬编码的多个<tr app-myComp>。

DEMO

子类：

 ...
 myColor: string;

 @Input()
  set chosen(chosen: boolean) 
    this.myColor = chosen ? "red" : "blue"
  

 ...

父视图：

<table>
  <tr class="">
    <td>buttons</td>
  </tr>
  <tr app-myComp (click)="chosenTr = i" [chosen]="i == chosenTr" *ngFor="let item of [1,2,3,4]; let i = index"></tr>
</table>

父类：

  ...
  chosenTr = -1;
  ...