使用jquery bootstrap Popover的popover指令

Question

我正在尝试将jquery bootstrap popover插入angular 2指令。我就是不能关闭十字按钮上的弹出窗口。

@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');
        });


    }
}

close button onclick事件的代码肯定不起作用。我不知道如何获取jquery对象。我怎样才能做到这一点？

Answer 1

试试on

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

希望这能行得通。

更新：

工作的Directive代码：

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

在component中

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

    }

在模板中：

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

看看这个。