在Angular 4中单击相同同级组件时更改属性

Question

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

结构：

父组件：

<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

Answer 1

您需要到母部件与分配的值添加属性所点击的子项的索引。每次单击孩子时更改其值，并将其作为布尔值@Input传递给子元素（如果属性值等于子元素索引，则为true，反之，则为true）。在子组件中添加一个条件来检查@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; 
    ...