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的直接子组件。所以我试图通过文档getelementbyId来实现，从这个我得到popover引用但是popover不会来。

Answer 1

希望这个问题还为时不晚。

定义您的popover指令

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

像这样引用你的popover指令 @ViewChild（' popoverDirective '）popoverDirective：PopoverDirective;
然后在你的代码中显示或隐藏popover this.popoverDirective.show（）; this.popoverDirective.hide（）;

Answer 2

要以编程方式处理popover，只需声明ViewChild，如下所示。

在.ts文件中：

import { Popover } from 'ngx-popover';

@ViewChild("myPopover") myPopover : Popover;

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

Answer 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。我想说的是，您应该将您的popover元素导出为“ bs-popover”类型的对象，以便可以从您的角度代码访问该对象。

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

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

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

3 个答案: