Блог

Главная - Вопросы по программированию - Передача данных дочернему компоненту через модальную функцию начальной загрузки ngx

Передача данных дочернему компоненту через модальную функцию начальной загрузки ngx

#javascript #html #angular #bootstrap-modal #ngx-bootstrap

#javascript #HTML #угловой #bootstrap-модальный #ngx-bootstrap

Вопрос:

У меня есть следующий код в моем родительском компоненте в приложении angular

РОДИТЕЛЬСКИЙ КОМПОНЕНТ

 <div>
    <button *ngIf="data.type == 'el'" (click)="readInfo('el')">click</button>
    <button *ngIf="data.type == 'ga'" (click)="readInfo('ga')">click</button>
</div>


readInfo(type) {
    if (type === 'el') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, el);
    } else if (type === 'ga') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, ga);
    }
  }

ДОЧЕРНИЙ КОМПОНЕНТ

  <div class="container" *ngIf="el">
      <!-- el contents goes here -->
  </div>

  <div class="container" *ngIf="ga">
    <!-- ga contents goes here -->
</div>

я хочу передать значение дочернему компоненту из моего родительского компонента через модальную функцию. Моя цель — получить это значение внутри моего дочернего компонента и отобразить содержимое на его основе, используя *ngIf

Комментарии:

1. Как насчет использования @Input для динамической передачи ваших данных, вы можете проверить эту ссылку для получения дополнительной информации: angular.io/guide/component-interaction

Ответ №1:

Решение 1

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

 this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    );

Решение 2

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

Метки: