当我们点击保存或取消按钮时如何关闭弹出模式

Question

我有一个 angular 应用程序，因为我使用 angular 创建了弹出窗口。

.component.html

 <div class="col-md-4 ">
          <div class="cc button-popover" >
          <popover-content #addObjectivePopovers
          [animation]="true"
          [closeOnClickOutside]="false"
          [closeOnMouseOutside]="false" class="vb" *ngIf="!showPopover" >

    <form >
          <div class="form-group popover-form" >
              <label>Enter Custom Trigger Habit: When I</label>
              <textarea class="form-control" [(ngModel)]="name" name="name"></textarea>
              
          </div><br>
            <div class="form-group popover-form">
              <label>Enter Custom Trigger Habit: I will</label>
              <textarea class="form-control" #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea>
              <p class="textarea-count">({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p>
            </div>
            <div class="popover-btn">
              <button  class="btn btn-default " (click)="showPopover = false">CANCEL</button>
              <button type="button" (click)="save()" >SAVE</button>
            </div>
      </form>
</popover-content>
</div>

<button [popoverOnHover]="false" type="button" popoverPlacement="bottom"   [popover]="addObjectivePopovers" >ADD CUSTOM HABIT</button>
        </div>

所以当我在 textarea 中添加一些内容并单击保存按钮时，我必须关闭弹出窗口，而且当我们单击取消时它也应该关闭弹出窗口。

任何人都可以提供相同的帮助。

Answer 1

假设 show 布尔标志与 popover 的可见状态是分开的，然后将一个新的布尔标志添加到您的组件 ts 中，它将用于管理 popover 的可见状态并使用您的cancel/save 控件：

组件 ts:

showPopover = false

save() {
  this.show = true;
  this.showPopover = false;
}

组件html:

<div class="form-group popover-form" *ngIf="showPopover">
    <textarea class="form-control" id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea>
</div>

<div>
    <button  class="btn btn-default cancel-btn" (click)="showPopover = false">CANCEL</button>
    <button type="button" (click)="save()">SAVE</button>
</div>

<p *ngIf="show">{{name}}</p>

当我们点击保存或取消按钮时如何关闭弹出模式

How to close the popup modal when we click on save or cancel button

javascript

html

angular

typescript

popover