Question

我使用ng2-bootstrap-modal

将示例表格添加到示例确认对话框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

我想我必须将此类型传递给构造函数然后在订阅方法中得到一个结果。

我不知道该怎么做。

期待任何回复。提前谢谢。

Answer 1

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

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,     boolean>

对话框，形式为angular2

1 个答案: