Question

我是角度5的新手，我试图在弹出式窗口的右上角添加“ x”，单击“ x”后，弹出式窗口应关闭。我该如何实现？下面是我的代码。弹出窗口中是否有任何属性可以显示“ x”关闭图标。在这里，我尝试使用ng-bootstrap popover。

  <div>
    <a *ngIf="conditionA" [attr.disabled]="isDisabled">
      {{ authorName }}
    </a>
    <a *ngIf="!conditionB" href="#" (click)="showPopover(accountId)" placement="top"
      popover-trigger="'outsideClick'" [ngbPopover]="popContent" #p="ngbPopover" (document:click)="closeAccount(p, $event)">{{ Display_popover }}</a>
  </div>

<ng-template #popContent>
        <app-account-detail></app-account-detail>
      </ng-template>

Answer 1

必须工作（不，不需要定义“关闭”功能）

<!--in template we write "p.close()"-->
<ng-template #popContent>
    Hello, !
    <button (click)="p.close()">click</button>
</ng-template>

<!--look that the button that lanch the pop over has a "#p=ngbPopover" -->
<button type="button" [ngbPopover]="popContent" [autoClose]="false" 
      triggers="manual" #p="ngbPopover" (click)="p.open()" >
  Click me to open a popover
</button>

* ngFor中的

更新（我不知道是否可行）如果我们在* ngFor中有popOver，则可以尝试解决方法

<section *ngFor="let account of accounts"> 
   <ng-template #popContent>
       Hello
       <button (click)="close(p)">click</button>
   </ng-template> 
   <button type="button" [ngbPopover]="popContent" 
         [autoClose]="false" triggers="manual" 
        #p="ngbPopover" (click)="open(p)" >Click me</button>  
</section>

In the .ts
  close(pop:any)
  {
    pop.close()
  }
  open(pop:any)
  {
    pop.open()
  }

请参见stackblitz

如何在ng-bootstrap popover中添加close'X'

1 个答案: