Как передать данные в модальный диалог ng-bootstrap - PullRequest
Новая
       36

Как передать данные в модальный диалог ng-bootstrap

0 голосов
/ 28 марта 2019

Я пытаюсь открыть модель из родительского компонента.Итак, я получил фиктивное диалоговое окно, открытое из родительского компонента, с помощью справки: как передать данные в модальный Angular ng-bootstrap для привязки .В диалоге вместо фиктивного текста у меня есть поле ввода для отображения информации из родительского компонента, и в то же время пользователь может редактировать эту информацию и требовать, чтобы это изменение отправлялось обратно в родительскую информацию.Я пытаюсь сделать что-то похожее на Angular Material, в котором MAT_DIALOG использует tokeninjection, но я не полностью им следую. 

 import { Component, OnInit, InjectionToken, Injector, OnDestroy, 
  TemplateRef, Inject } from '@angular/core';
  import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

         export interface CancelDialogData {
            name: string; // this can be any string;
            Comments: string;
         }
        export declare const CUSTOM_DIALOG_DATA: InjectionToken<any>;

          @Component({
           selector: 'app-reject-dialog',
        templateUrl: './reject-dialog.component.html',
           styleUrls: ['./reject-dialog.component.css']
           })
           export class MyDialogComponent implements OnInit {

         constructor(public activeModal: NgbActiveModal,  
       @Inject(CUSTOM_DIALOG_DATA) public data: CancelDialogData) { }

          ngOnInit() {
                 }

              onCancelClick(): void {
                this.activeModal.close();
            }

                }

Из родительского компонента: 

     const dialogRef = this.modal.open(CancelDialogComponent, data: 
     {name: '', approverComments: ''});

, когда я пытаюсь передать эти данныеУ меня есть ошибка компилятора, что данные не являются NgbModalOptions.Я действительно не понимаю InjectionToken здесь, просто он выглядит чище, чем @ Input / @output.Помогите, пожалуйста, как этого добиться, как Активный материал Диалог.

1 Ответ

1 голос
/ 28 марта 2019

документы используют: 

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

Обратите внимание, что если мы используем кнопку «ОК», которую мы получили в «ре» значение, другой случай (если кнопка «крест» или за пределами модального, мы получили «значение» в «отклонить»

Обновлено Как получил ответ

Если мы хотим получить какое-то значение из нашего модального режима, мы используем функцию close для отправки значения. например наш .html модальный как 

    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
        <!--in function dismiss return a string-->
      <button type="button" class="close" aria-label="Close" 
(click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, <input [(ngModel)]="name">!</p>
    </div>
    <div class="modal-footer">
      <!--but, in function close we return the "name" variable-->
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close(name)">Aceptar</button>
    </div>

Когда мы делаем «открыть» и получаем модальную ссылку 

const modalRef = this.modalService.open(NgbdModalContent)
modalRef.componentInstance.name = 'World';
modalRef.result.then(res=>{
  console.log("CloseButton", res)
},dismiss=>{
  console.log("Cross Button",dismiss)
})

См. Пример в stackblitz

...