Angular 7 вызывает метод ngOnInit или любой другой метод компонента, который содержится в компоненте

Question

У меня есть такая ситуация, в которой у меня есть компонент с именем user-table-list, который в основном представляет собой таблицу с записями, представляющими некоторых пользователей.
Компонент был спроектирован так, что есть еще один компонент с именем table-list, который описываеттаблица и ее поведение для нескольких компонентов (и user-table-list является одним из них).HTML-код для user-table-list является действительно следующим:

<app-table-list #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

, в то время как HTML-код для table-list имеет весь дизайн для таблицы, описывая столбцы, заголовок и т. Д., В то время как отдельный компонентописывает в файле .ts конфигурацию своей личной таблицы, то есть данные, которые они загружают для заполнения таблицы, имена для столбцов и т. д.
В заголовке есть кнопка для добавления новой записи в таблицу, пустьэто будут пользователи, клиенты или что-то еще.Событие и поиск в базе данных обрабатываются внутри table-list.component.ts, который выполняет другое действие onclick в зависимости от типа таблицы, из которой получено событие.Примерно так:

createNewButtonClicked(tableType: string) {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;

    switch (tableType) {
        case 'clients': {
            this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
}

Внутри открываемых диалогов добавлен новый клиент / проект / пользователь.Я хочу обновить список после закрытия диалогового окна, вызвав метод извлечения базы данных.Но этот поиск вызывается внутри одного компонента, например, user-table-list.Поэтому я ищу способ вызова метода поиска и обновления списка user-table-list извне, без необходимости обновления страницы из браузера.Проблема в том, что я не могу этого достичь ни в компоненте диалога, ни в компоненте списка таблиц.Я попытался импортировать компонент в конструктор и вызвать метод, как в диалоговом окне, так и в компоненте списка таблиц, но он выдает предупреждение для циклической ссылки и ничего не делает.То же самое, если я создаю внешнюю службу для вызова метода, потому что всегда есть циклическая ссылка.
У меня нет альтернатив;Как это можно сделать?
К сожалению, я не могу изменить дизайн приложения.

Answer 1

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

createNewButtonClicked(tableType: string) {
    // your existing logic
    // ... 
    const dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
    // example dialog .afterClosed
    dialog.afterClosed().subscribe(closeResult => {
        // update from database after dialog is closed
    });
}

Вы можете использовать свойство Output, чтобы сообщить родительским компонентам, что что-то произошло внутри дочернего элемента.Внутри функции подписки (где я помещаю комментарий для обновления базы данных) находится место, где вы бы хотели, чтобы диалоговое окно было закрыто.Ваш код для списка может выглядеть примерно так: @Output () dialogClosed = new EventEmitter ();

createNewButtonClicked(tableType: string) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;
    let dialog;
    switch (tableType) {
        case 'clients': {
            dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            dialog = this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            dialog = this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
    // check to see if dialog was opened
    if (!!dialog) {
        dialog.afterClosed().subscribe(closeResult => {
            // emit that dialog was closed
            this.dialogClosed.next();
        });
    }
}

Затем в компоненте вашей пользовательской таблицы следите за тем, чтобы событие было отправлено:

<app-table-list (dialogClosed)="onDialogClosed($event)"></app-table-list>

И, наконец, ваши пользовательские таблицы ts.Обратите внимание, что я не вызываю ngOnInit, когда диалоговое окно закрывается, поскольку цель ngOnInit - инициализация.Поэтому извлеките логику базы данных внутри ngOnInit в другой метод и вызовите этот метод для обновления данных, когда диалоговое окно также закрыто:

ngOnInit() {
  this.getData();
}

onDialogClose() {
    this.getData();
}

private getData() {
  // make database calls here and update data from response
}

Вы должны использовать только ngOnInit для инициализации представления, так как вы можете устанавливать некоторыездесь значения по умолчанию, которые вы не хотите сбрасывать, поэтому рекомендуется не вызывать ngOnInit снова позже в жизненном цикле страниц

Answer 2

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

Примерно так:

стол-list.component.ts

@Output() clickedOkDialog = new EventEmitter<boolean>();

onClickOkDialog() {
  this.clickedOkDialog.emit(true);
}

Затем вы можете записать событие в user-table-list

В вашей пользовательской таблице-list.component.html

<app-table-list (clickedOkDialog)="onClickOkDialog($event)" #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

В вашем user-table-list.component.ts

onClickOkDialog(event) {
   // update from database after dialog is closed
}