Angular 2 : how to open ngx-popover programmatically

Question

我正在使用 ngx-popover我正在尝试通过单击按钮从另一个组件打开它

secondcomponent.html

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

第二个组件.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 没有出现。

Answer 1

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

1. 定义你的 popover 指令

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

1. 像这样引用你的 popover 指令@ViewChild('popoverDirective') popoverDirective: PopoverDirective;

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