Angular ngx-smart-popover 在条件下打开

Question

目前我有这样的智能弹出窗口设置，带有一个附加按钮并在单击时显示。这是像这样放在它自己的组件中:

<popover-content #myPopover id="myPopover"  
   placement="bottom" [animation]="true" [closeOnClickOutside]="false" >
// Some content here
</popover-content>
<input type='button' #selectMyPopover [popover]="myPopover" class='btn'
  popoverPlacement="bottom" [popoverOnHover]="false" 
 [popoverCloseOnMouseOutside]="false" [value]='myButton'>

然后当我想使用它时，我将它包含在组件标签中，如下所示:

<app-my-popover></app-my-popover>

这很棒，但我发现的所有示例都需要像这样使用该附加按钮:

<input type='button'[popover]="myPopover"...

我正在尝试根据条件显示弹出窗口，而不必单击该按钮。例如:

myMethod()
{
    if(true)
    {
        this.myPopover.open();
    }
}

是否可以自己以类似的方式从 typescript 中打开而不是使用按钮？

Answer 1

您需要使用 ViewChild 在 typescript 中获取对 popover 组件的引用，如下所示:

@ViewChild('myPopover') myPopover : PopoverContentComponent;

然后你可以在你想要的地方访问这个引用:

this.myPopover.show();