Angular2 NG2-ポップオーバーの非表示は、（）

Question

app.module.ts私は隠したい

import { PopoverModule } from 'ng2-popover'; 
@NgModule({ 
    declarations: [ ...], 
    imports: [PopoverModule], 
    providers: [] 
}) 

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

import { PopoverContent } from 'ng2-popover'; 

@ViewChild('customPopover') customPopover: PopoverContent; 

protected toggleAddToListModalPopover(e):void { 
    this.customPopover.hide(); 
    this.showAddToListModal = !this.showAddToListModal; 
    e.stopPropagation(); 
} 

が動作していませんモーダルが開くときのポップオーバー。私は 'customPopover.hide（）' 関数を呼び出すと、それは私にエラーを与える：

error_handler.js：51 TypeError例外：プロパティを読み取ることができません '隠す' 未定義

のPopoverContent.hide（PopoverContent.jsで：78 ）

'PopoverContent.js'ファイルにはthis.popover.hide（）;という行があります。しかし私はそれをどのように初期化するか分かりません。私の理解として@ViewChildは#customPopover、すなわち私の場合popover-contentにクラスバインドを初期化するだけです。誰かが私に 'Popover'を初期化するための解決策を教えてもらえますか？

Answer 1

あなたの場合、this.customPopoverは未定義です。

他の方法、あなたはこのことができますかどうかを確認しthis-

<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> 

のようなあなたのポップオーバー・コンテンツを非表示にすることができます。

Answer 2

以下のコードを使用して解決しました。すなわち、関数のパラメータとして 'customPopover'を追加し、hide（）メソッドを呼び出します。私はそれを解決する良い方法かどうかわからないのですか？

example.html

<button class="btn btn-secondary popoverBtn" (click)="toggleAddToListModalPopover(customPopover, $event)">Add to list</button> 

example.component.ts：

protected toggleAddToListModalPopover(customPopover, e):void { 
    customPopover.hide(); 
    this.showAddToListModal = !this.showAddToListModal; 
    e.stopPropagation(); 
}