对话框，形式为angular2

Question

我使用ng2-bootstrap-modal

将示例表单添加到示例Confirm Dialog ng2-bootstrap-modal

改变模板

<div class="modal-dialog">
  <div class="modal-content">
    <form [formGroup]="loginForm" (ngSubmit)="doLogin($event)">
      <div class="modal-header">
         <button type="button" class="close" (click)="close()">&times;</button>
         <h4 class="modal-title">{{title || 'Confirm'}}</h4>
      </div>
      <div class="modal-body">
        <p>{{message || 'Are you sure?'}}</p>
        <div>
          <input formControlName="email" type="email" placeholder="Your email">
          <input formControlName="password" type="password" placeholder="Your password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">OK</button>
        <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
      </div>
    </form>
</div>

改变ts

import { Component, OnInit, } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
import { FormBuilder, Validators } from '@angular/forms'

export interface ConfirmModel {
  title:string;
  message:string;
}

@Component({
  selector: 'app-defproducts-edt',
  templateUrl: './defproducts-edt.component.html'
  //, styleUrls: ['./defproducts-edt.component.css']
})

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,     boolean> implements ConfirmModel, OnInit {

  title: string;
  message: string;

  public loginForm = this.fb.group({
    email: ["", Validators.required],
    password: ["", Validators.required]
  });

  constructor(dialogService: DialogService, public fb: FormBuilder) {
    super(dialogService);
  }

  confirm() {
    // we set dialog result as true on click on confirm button, 
    // then we can get dialog result from caller code 

    this.result = true;
    this.close();
  }

  doLogin(event) {
    console.log(event);
    console.log(this.loginForm.value);
    this.close();
  }

  ngOnInit() {
  }
}

我想将结果数据放在标记的位置// ** ** //

let disposable = this.dialogService.addDialog(DefproductsEdtComponent, {
            title:'Confirm title', 
            message:'Confirm message'})
            .subscribe((isConfirmed)=>{
                //We get dialog result
                if(isConfirmed) {
                    // **HOW This place get data from form on dialog? **//
                    //alert();
                } else {
                    //alert('declined');
                }
            });

}

ng2-bootstrap文档说它可以返回指定的类型

abstract class DialogComponent ....
/**
* Dialog result 
* @type {T2}
*/
protected result:T2

我想我必须将此类型传递给构造函数，然后在subscribe方法中获得结果。

我不知道该怎么做。

期待任何回复。 先感谢您。

Answer 1

在您的情况下，只需将结果类型从布尔值更改为字符串。

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,     boolean>