[英]Angular2 ng2-popover hide() is not working
app.module.ts app.module.ts
import { PopoverModule } from 'ng2-popover';
@NgModule({
declarations: [ ...],
imports: [PopoverModule],
providers: []
})
example.html example.html的
<a [popover]="customPopover" [popoverOnHover]="true" [popoverCloseOnMouseOutside]="true" href="www.google.com" (click)="$event.stopPropagation()" target="_blank">{{name}}</a>
<!--Popover content -->
<popover-content #customPopover title="{{name}}" placement="right"
[closeOnClickOutside]="true" [closeOnMouseOutside]="true">
<span class="popoverDesc">{{description}}</span><br /><br />
<a href="{{websiteLink | formatUrl:'url'}}" (click)="$event.stopPropagation()" target="_blank">{{websiteLink | formatUrl:'text'}}</a><br /><br />
<button class="btn btn-secondary popoverBtn" (click)="toggleAddToListModalPopover($event)">Add to list</button>
</popover-content>
example.component.ts example.component.ts
import { PopoverContent } from 'ng2-popover';
@ViewChild('customPopover') customPopover: PopoverContent;
protected toggleAddToListModalPopover(e):void {
this.customPopover.hide();
this.showAddToListModal = !this.showAddToListModal;
e.stopPropagation();
}
I want hide the popover when modal opens. 我想在模式打开时隐藏弹出窗口。 When I call the 'customPopover.hide()' function it gives me error: 当我调用“ customPopover.hide()”函数时,它给了我错误:
error_handler.js:51 TypeError: Cannot read property 'hide' of undefined error_handler.js:51 TypeError:无法读取未定义的属性“ hide”
at PopoverContent.hide (PopoverContent.js:78) 在PopoverContent.hide(PopoverContent.js:78)
In 'PopoverContent.js' file there is line this.popover.hide(); 在“ PopoverContent.js”文件中,有一行this.popover.hide();。 but I have no idea how to initialize it. 但我不知道如何初始化它。 As my understanding is @ViewChild only initializes the class bind to #customPopover ie in my case popover-content. 据我了解,@ViewChild仅将类绑定初始化为#customPopover,即在我的情况下为popover-content。 Can someone please give me a solution to initialize the 'Popover'? 有人可以给我解决方案初始化“ Popover”吗?
I resolved it using below code ie add 'customPopover' as parameter in the function and call hide() method. 我使用以下代码解决了该问题,即在函数中添加“ customPopover”作为参数并调用hide()方法。 I don't know if its a good way to resolve this or not? 我不知道这是否是解决此问题的好方法?
example.html example.html的
<button class="btn btn-secondary popoverBtn" (click)="toggleAddToListModalPopover(customPopover, $event)">Add to list</button>
example.component.ts: example.component.ts:
protected toggleAddToListModalPopover(customPopover, e):void {
customPopover.hide();
this.showAddToListModal = !this.showAddToListModal;
e.stopPropagation();
}
I think in your case, this.customPopover
is undefined. 我认为在您的情况下, this.customPopover
是未定义的。
Other way you can hide your popover-content like this- 您可以通过其他方式隐藏您的popover内容,例如,
<div>
<popover-content #myPopover title="this header can be omitted" placement="right" [closeOnClickOutside]="true">
<b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
<b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>. Click outside of this popover and it will be dismissed automatically.
<u (click)="myPopover.hide()">Or click here to close it</u>.
</popover-content>
<button [popover]="myPopover">click this button to see a popover</button>
</div>
See if this helps. 看看是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.