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>

Child（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 link：Angular 4 app

Answer 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;
  ...

在Angular 4

1 个答案: