Angular 8 - Общий компонент вызывается дважды другим вызывающим его компонентом

Question

Итак, у меня есть компонент диалога и его родительский компонент, совместно использующий повторно используемый компонент. Каждый раз, когда я вызываю функцию многократно используемого компонента из диалогового окна, он также вызывает ее из своих родителей (оба вызывают функцию в ngAfterViewInit ()). Есть идеи, как предотвратить двойной вызов родительского компонента?

Родительский компонент

@ViewChild('receivablesCustomerAcc', {static: false}) private customerAccountSelect: CustomerAccountSelectComponent;

public ngAfterViewInit(): void {
    this.customerAccountSelect.getCustomerAccounts();
}

Диалоговый компонент

@ViewChild('addReceivableCustomerAcc', {static: false}) private dialogcustomerAccountSelect: CustomerAccountSelectComponent;

private ngAfterViewInit(): void {
    this.dialogcustomerAccountSelect.getCustomerAccounts();
}

Общий компонент

export class CustomerAccountSelectComponent implements OnInit, OnDestroy {
    constructor(
        private customerService: CustomerApiService,
    ) { }

    public ngOnInit(): void {

    }

    public getCustomerAccounts() {
        // Retrieves data from API
    }
}

Answer 1

Эмпирическое правило относительно диалогов (по моему мнению):

1. Для всего, что вам нужно внутри диалогового окна, выберите его в вызывающем компоненте и передайте как данные диалога.
2. Все действия диалога должны выводить событие на родительский компонент, который отвечает за фактический бизнес-лог c.

Второе правило не применяется к диалогам, которые являются самодостаточными (используют один и тот же лог c между несколькими компонентами)

Answer 2

Вместо вызова функции в диалоговом окне вы можете передать содержимое getCustomerAccounts () от родителя в диалоговое окно. Вы можете сделать это с помощью localstorage / sessionstorage или передать его в диалог при его открытии. Angular Диалог материалов имеет свойство данных, которое можно использовать для отправки данных в диалог. Это может выглядеть так:

 dialogRef = this.matDialog
        .open(SomeDialog, {
          data: { someData}
        }) 

Затем данные можно получить, используя:

 constructor(
    @Inject(MAT_DIALOG_DATA) public dialogData,
  ) { }
  ngOnInit() {

    const someData = this.dialogData.someData;

  }

Надеюсь, что это помогло. Удачи.