时间戳

首页 > 解决方案 > 在 Angular 6 中调用不同的 ng-bootstrap 模式弹出窗口

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

问题描述

我正在按照 ng-bootstrap 模态弹出窗口的教程在网格中添加、编辑和删除。我使用以下按钮将 ng-template 添加到 Add

<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>

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

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

用于调用 Add 弹出窗口。如何进行另一个 modalService.open 调用来调用删除对话框。

谢谢

标签： angulartwitter-bootstrap

解决方案

只需将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>

推荐阅读