Question

我有一个将道具传给子组件的组件。我想取[info]的结果值并将其用作[value]

的条件

基本上，[info]道具等于字符串good-info吗？如果是，则将值设置为Happy，否则将其设置为Sad

<some-component [info]="row.calculation.anotherCalculation.information"
                [value]="info === 'good-info' ? 'Happy' : 'Sad' "
></some-component >

当然，我可以为value使用与info相同的计算，但这似乎是多余的。此外，info道具中使用的计算比上面显示的示例更长。

Answer 1

您可以使用template reference variable（例如#child）来引用子组件，这将允许您获取info属性的值。但是，以下代码会导致ExpressionChangedAfterItHasBeenCheckedError，因为一个属性取决于在同一检测周期中设置的另一个属性。

<some-component #child 
  [info]="row.calculation.anotherCalculation.information"
  [value]="child.info === 'good-info' ? 'Happy' : 'Sad' ">
</some-component >

有关演示，请参见this stackblitz。

如果在设置value后从子组件触发更改事件，则设置info可以避免上述异常：

export class SomeComponent {

  private _info: string;

  @Output() infoChanged = new EventEmitter<string>();

  @Input() public get info(): string {
    return this._info;
  }
  public set info(x: string) {
    this._info = x;
    this.infoChanged.emit(x);
  }

  @Input() public value: string;
}

<some-component #child 
  [info]="row.calculation.anotherCalculation.information" 
  (infoChanged)="child.value = $event === 'good-info' ? 'Happy' : 'Sad'" >
</some-component>

有关演示，请参见this stackblitz。

Answer 2

我建议使用一种方法进行计算（在此示例中仅返回嵌套的属性），类似

class SomeComponent {
    calculate(row: any) {
        return row.calculation.anotherCalculation.information;
    }
}

然后，您可以在HTML中完成

<div *ngFor="let row of rows">
    <some-component [info]="calculate(row)"
                    [value]="calculate(row) === 'good-info' ? 'Happy' : 'Sad' "
    ></some-component>
</div>

角度6-使用组件属性作为相同的组件属性值

2 个答案: