Question

我正在按照ng-bootstrap模态弹出窗口的教程进行操作，以在网格内添加，编辑和删除。我使用以下按钮在ng模板中添加了

<button type="button" class="btn btn-primary" (click)="openAdd(content)" >Add</button>

这将打开带有以下ng-template代码的模式对话框

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{meetingDateTitle}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="meetingDate">Meeting Date:</label>
          <div class="input-group">
              <input id="meetingDate" class="form-control" placeholder="yyyy-mm-dd" name="dp1" #c2="ngModel" [(ngModel)]="meetingRequest.MeetingDt" ngbDatepicker #d1="ngbDatepicker">
              <div class="input-group-addon" (click)="d1.toggle()" >  
                  <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 
              </div> 
          </div>
          <br/>

          <br/>

          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
      <!-- <button type="button" class="btn btn-outline-dark" (click)="saveAddMeeting">Save</button> -->
      <input type="submit" value="Save" class="btn btn-primary" (click) ="saveMeeting()" >
    </div>
  </ng-template>

我的问题是，如果我为Delete确认创建另一个ng-template，如何调用另一个弹出对话框窗口？

I see that the bootstrap call for another button is this.modalService.open(content, { centered: true});

用于调用“添加”弹出窗口。如何再次调用modalService.open调用删除对话框。

谢谢

Answer 1

只需更改您在函数中传递的参数content。此变量在模板范围中用#content声明，代表您的ng-template元素。

<button type="button" class="btn btn-primary" (click)="openAdd(content)" >Add</button>
<button type="button" class="btn btn-primary" (click)="openAdd(delete)" >Delete</button>

<ng-template #content let-modal>
...
 </ng-template>

<ng-template #delete let-modal>
...
</ng-template>

在Angular 6中调用不同的ng-bootstrap模态弹出窗口

1 个答案: