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

【问题标题】：Angular 2 : how to open ngx-popover programmaticallyAngular 2：如何以编程方式打开 ngx-popover
【发布时间】：2017-12-13 19:58:30
【问题描述】：

我正在使用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的直接子组件。所以我尝试通过文档 getelementbyId 来实现，从中我得到了 popover 参考，但 popover 没有到来。

【问题讨论】：

标签： angular typescript popover

【解决方案1】：

希望这个问题还不算太晚。

定义你的 popover 指令

&lt;a [routerLink]="null" #popoverDirective="popover" [popover]="selectorPopover" popoverPlacement="top" container="body"&gt;&lt;/a&gt;

像这样引用你的 popover 指令 @ViewChild('popoverDirective') popoverDirective: PopoverDirective;
然后在您的代码中显示或隐藏弹出框 this.popoverDirective.show(); this.popoverDirective.hide();

【讨论】：

【解决方案2】：

要以编程方式处理弹出框，只需像下面这样声明 ViewChild。

在您的.ts 文件中：

import { Popover } from 'ngx-popover';

@ViewChild("myPopover") myPopover : Popover;

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

【讨论】：

【解决方案3】：

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

 @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”类型对象，以便可以从您的角度代码访问该对象。

如果你在使用 ngx-bootstrap 时遇到了另一个类似的问题，我想你可以从他们的主页上找到答案，因为每个 api 参考都告诉你应该将元素导出为什么。

screenshot from the homepage reference where you can find the "exported as" description

【讨论】：