Question

我正在尝试从父组件打开模型。因此，我从how to pass data to Angular ng-bootstrap modal for binding的帮助下从父组件打开了一个虚拟对话框。在对话框上，而不是虚拟文本上，我有一个输入框来显示父组件的信息，同时用户可以编辑此信息，并要求此更改发送回父信息。我尝试做类似Angular Material MAT_DIALOG的使用令牌注入的操作，但是我没有完全关注它。

 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更干净。请像“主动材料对话框”一样协助实现它。

Answer 1

文档使用：

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

中的示例

如何将数据传递到ng-bootstrap模态对话框

1 个答案: