Popover-Direktive mit jquery bootstrap popover

Question

Ich versuche, ein jquery Bootstrap-Popover zu einer eckigen 2-Direktive zu verbinden. Ich kann das Popover auf dem Kreuzknopf einfach nicht schließen.

@Directive({ 
    selector: '[popover]', 
    host: { 
    } 
}) 
export class PopOverDirective { 

    @Input() type: string; 

    constructor(private element : ElementRef) {} 

    ngAfterViewInit() { 
     var self = this; 

    (<any>$(this.element.nativeElement)).popover({ 
      placement: 'right', 
      html: 'true', 
      trigger: 'manual', 
      title: '<span class="text-info"><strong>title</strong></span>' + 
      '<button type="button" id="close" class="close" onclick="$(self.element.nativeElement).popover(&quot;hide&quot;);">&times;</button>', 
      content: 'test' 
     }).click(function (e) { 
      (<any>$(self.element.nativeElement)).popover('show'); 
     }); 


    } 
} 

Der Code für die Schaltfläche zum Schließen onclick -Ereignis funktioniert sicher nicht. Ich weiß nicht, wie man das jquery-Objekt bekommt. Wie kann ich das schaffen?

Answer 1

Versuchen on:

.on('click',() => nativeElement.popover('show')); 

Hoffnung, das wird funktionieren.

Arbeiten Directive Code:

import { Directive, ElementRef, AfterViewChecked } from '@angular/core'; 

const $ = require('jquery'); 

@Directive({ 
    selector: '[popover]' 
}) 
export class PopOver implements AfterViewChecked { 
    constructor(public el: ElementRef) { } 

    ngAfterViewChecked(): void { 
     const popoverElement: any = $(this.el.nativeElement); 

     popoverElement.popover({ }); 
    } 
} 

In component:

this.popoverText = ` 
    <div id='popover-content' class='popover-display'> 
     <div class='popover-text'>My popover text</div> 
    </div>`; 

    } 

In Vorlage:

Aktualisiert

<div class="help"> 
    need more? 
    <a tabindex="0" class="icon-help" role="button" data-toggle="popover" data-trigger="focus" title="" [attr.data-content]="popoverText" data-placement="top" data-html="true" popover> 
    </a> 
</div> 

Checkout dies.