對話框，形式為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>