Взаимодействие угловых компонентов и выходные события размытия

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>

Обратите внимание, что банан в коробке имеет некоторые недостатки в некоторых случаях ( см. Последний раздел этой статьи ), и в этом случае вы можете просто привязать родителя total кребенок @Input, и пусть ребенок @Output вызывает родительскую функцию отдельно.Что-то вроде:

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

Помимо этого вы можете разделить [outputVals] на две @Input переменные focusVal и blurVal соответственно, чтобы упростить редактирование шаблона по прихоти (печатать целый объект сложно: D).Хотя это скорее дизайнерский выбор, но и способ, которым вы делаете это, также прекрасно.

Я разветвил ваш Stackblitz , чтобы показать возможные модификации, которые я упомянул.