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();
    }
}

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

Answer 1

您需要使用ViewChild 在您的打字稿中获取对弹出框组件的引用，如下所示：

@ViewChild('myPopover') myPopover : PopoverContentComponent;

然后你可以在你想要的地方访问这个参考：

this.myPopover.show();

Answer 2

如果您查看他们的来源here，则有show 和hide 方法。然后，您需要使用@ViewChild 在您的 ts 文件中获取对该对象的引用，如下所示

@ViewChild('myPopover') myPopover : PopoverContentComponent;

以后你可以做

this.myPopover.show();