Angular 2：如何以编程方式打开ngx-popover

Question

我正在使用ngx-popover，我想通过点击按钮从另一个组件打开它。

secondcomponent.html

<button popover #ChatPopover=popover (click)="ClickElement()">
                            <span class="glyphicon glyphicon-comment"></span>
                        </button>

secondcomponent.ts

ClickElement() {

   this.div = document.getElementById("ChatPopover")
   console.log(this.div);

}

popoverelement.html

<div class="chat" name="chatwindow">
            <div [ng2-draggable]="true">
                <popover-content #ChatPopover
                                 placement="right"
                                 [animation]="true"
                                 [closeOnClickOutside]="true">


                    <button type="button" class="close" aria-label="Close" (click)="ChatPopover.hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 style="color:#D25C50">Chat</h5>

                </popover-content>
            </div>
       </div>

在这里，secondcomponent不是popovercomponent的直接子组件。所以我尝试通过document getelementbyId实现，虽然我得到了popover的引用，但是却没有弹出。

- PAR

Answer 1

希望回答这个问题不会太晚。

1. 定义您的弹出指令

<a [routerLink]="null" #popoverDirective="popover" [popover]="selectorPopover" popoverPlacement="top" container="body"></a>

2. 将您的弹出框指令引用如下 @ViewChild('popoverDirective') popoverDirective: PopoverDirective;

3. 然后在您的代码中显示或隐藏弹出框 this.popoverDirective.show(); this.popoverDirective.hide();

- Tom Lu

Answer 2

我遇到了同样的问题，这是我的代码，希望能对你有所帮助。

 @ViewChild('menuPopover')
 private popover: PopoverDirective;
 
 ......
 
 setConfigObject(imei:string, period: any):void{
    this.popover.hide();
    ...
  }

<a class="deviceAtag" [popover]="popover" placement="right" [outsideClick]="true" #menuPopover="bs-popover">{{item.devicename}}</a>
<ng-template #popover>... </ng-template>

我使用Angular7。

我认为关键是你应该将你的弹出元素导出为“bs-popover”类型对象，这样就可以从你的Angular代码中访问该对象。

如果你在使用ngx-bootstrap时遇到类似的问题，我认为你可以从它们的主页找到答案，因为每个API参考都说明了元素应该导出为什么。

主页参考截图，你可以在其中找到“导出为”描述

- TangMS

Answer 3

要以编程方式处理弹出窗口，请像下面这样声明ViewChild。

在您的.ts文件中：

import { Popover } from 'ngx-popover';

@ViewChild("myPopover") myPopover : Popover;

showPopover(){
    this.myPopover.hide();
}

- Dhinakar