Передавать родительский компонент в потомок это допустимый стиль программирования в Angular?

Question

[andreys75]

Добрый день!
Разбираюсь с чужим кодом на Angular 7. Пытаюсь составить список того что должно быть включено в рефакторинг.

Но хотя у меня довольно большой опыт программирования, c Angular начал работать совсем недавно, поэтому прошу совета.

Есть родительский компонент DataInputFormComponent в нем вызывается

<app-safety *ngFor="let safetySection of somthing; index as i" [incident]="Levels"
                      [viewType]="viewType" [index]="i" [componentCount]="something.length" [selectedIncidentLevel]=""></app-safety>

То что передать формирование списка строк надо уже в самом компоненте, я понимаю, но меня интересует то как данные возвращаются из компонента.

В конструкторе SafetyComponent есть следующий код:

constructor(dataInputForm: DataInputFormComponent) {
        this.dataInputForm = dataInputForm;
  }

Т.е. мы получаем ссылку на родительский компонент, и когда в данном компоненте нажимаем кнопку добавить еще одну запись, в обработчике событий мы вызываем функцию по добавлению из родительского компонента

addSafetySection() {
    this.dataInputForm.addSafetySection();
  }

  removeSafetySection(i: number) {
    console.log('removing safety section with index- ', i);
    this.dataInputForm.removeSafetySection(i);
  }

Таким образом компонент фактически не изолирован от родительского компонента, передает данные вверх по дереву не с помощью @Output событий (их в safety компоненте нет вообще), а благодаря ссылке на родительский компонент.

На мой взгляд это ужасно, но может быть я чего то не понимаю, народ тут гордится этим решением, и поскольку я в компании новенький, буду благодарен за отзывы, необходимо ли такой код рефакторить или это допустимая в Angular практика

Answer 1

[Антон Швец]

В потомке не нужно инжектить родителя, так не делают.
Если уж нужно передать событие таким образом, то инжектят сервис, либо рутовый общий (типа store), либо сервис родителя.
В сложных случаях можно реализовать паттерн DCI через сервис, который будет знать об инстансах компонентов, но я бы избегал, сложно написать чисто.

А конкретно этот пример, это совершенно точно евент через Output, он же простейший.
не знаю чем тут гордиться :) Хуже только инжектнуть компонент как паблик и использовать его методы в шаблоне.

Comments

[andreys75]

<mat-form-field class="col-md-1">
        <input name=SafetyIncidentImpactId [(ngModel)]="dataInputForm.SafetyIncidents[index].ImpactId" matInput placeholder="Impact ID">
      </mat-form-field>

Именно так и делается в данном проекте :)

[Антон Швец]

andreys75, еще и нгмодель. Тут могут быть глюки с детекцией изменений. И в разработке их можно не заметить, из-за двойного прогона cd в дев моде.
Опять таки, тут чисто событие.