Question

我想知道最好的方法是什么，当您有一个父级和子级组件，并且子级组件包含一个带有焦点/模糊事件的输入时，父级会想知道这些事件。

我希望父项还提供在输出返回值时可以使用的任何数据。

例如，如果我对父母有一个总计，希望孩子集中/模糊事件影响这个总数，我将执行以下操作：

父组件模板：

<div>Total: {{ total }}</div>
<app-child (focusEvent)="total = total + $event" [outputVals]="{focus: 10, blur: -3}"></app-child>
<app-child (focusEvent)="total = total + $event" [outputVals]="{focus: 2, blur: -1}"></app-child>

子组件：

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: 
  `<div>
    <label for="input1">Focus adds {{ focusVal }}. Blur adds {{ blurVal }}</label>
    <input type="text" id="input1" (focus)="focusEvent.emit(focusVal)" (blur)="focusEvent.emit(blurVal)" />
  </div>`,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() focusEvent = new EventEmitter<any>();
  @Input() outputVals: {focus: any, blur: any};
  
  focusVal: any;
  blurVal: any;
  constructor() { }

  ngOnInit() {
    this.focusVal = this.outputVals.focus;
    this.blurVal = this.outputVals.blur;
  }

}

以下是工作示例中的上述示例：https://stackblitz.com/edit/angular-u1vy6f

所以我的问题是，这是正确的方法还是有更好的方法？

Answer 1

您的方法很好。尽早使用@Output / @Input的子组件是一种好习惯，并且可以使所有组件重用。

我建议进行一些更改：

我建议您不要在模板中进行操作。这使得查找，更改和调试变得更加困难。相反，我将在子/父组件中进行任何计算。

我还建议尽可能在框[()]中使用香蕉。很明显，目标是双向绑定。

在您的情况下，您想绑定total，删除(focusEvent)="total = total + $event"并用双向绑定替换似乎更合乎逻辑：

<app-child [(total)]="total"></app-child>

请注意，盒子中的香蕉在某些情况下（refer to the last section of this article）有一些缺点，在这种情况下，您可以将父项total绑定到子项@Input上，并让孩子的@Output分别调用父函数。像这样：

<app-child [total]="total" (totalChange)="parentFunction()"></app-child>

除此之外，您还可以将[outputVals]分成两个@Input和focusVal变量，以简化编辑模板的工作（键入整个对象很难：D）。尽管这更多是一种设计选择，但您的操作方式也非常好。

我分叉了您的Stackblitz，以显示我提到的可能的修改。

角组件交互聚焦并模糊输出事件

1 个答案:

我建议进行一些更改：