带角度2应用程序的自举弹出窗口

Question

在angular 2应用程序中，当使用jQuery单击按钮时，我正在显示一个弹出窗口。 但是打字稿抛出错误

 Object doesn't support property or method 'popover'

我的组件

/// <reference path="../shared/bootstrap.ts" />


 import { Component, OnInit } from '@angular/core';
 import * as $ from 'jquery';


  @Component({
    selector: 'my-calender',
    templateUrl: `
       <a class="btn btn-success btn-sm" (click)="openPopover()">Disply Popup</a>
     `
  })

export class CalenderComponent implements OnInit {  

    openPopover(): void {

       var that: any = this;

        $(that).popover({
        title: 'My Popover'

       });
     }  

打字稿编译很好。 但是，当我运行该应用程序并单击该按钮以显示弹出窗口时，它将引发上述错误。

但是其他boostrap默认功能正在按预期运行（导航栏，下拉菜单）。

Answer 1

this是不是说..

this是指CalendarComponent类。 我建议多看一些教程。 TypeScript / ES6具有简洁的功能，您实际上不必再担心this上下文。 只要使用() => {}箭头功能符号即可。

在此期间，您可以尝试执行以下操作：

@Component({
    selector: 'my-calender',
    templateUrl: `
       <a class="btn btn-success btn-sm" (click)="openPopover($event.currentTarget)">Disply Popup</a>
     `
})    
export class CalenderComponent implements OnInit {  

    openPopover(target: HTMLElement): void {
       $(target).popover({
        title: 'My Popover'
       });
    }
} 

您可以使用$event变量访问模板内的event属性。 单击将包含一个MouseEvent 。 MouseEvent具有currentTarget属性，该属性包含放置事件的HtmlElement。 从那里您可以初始化您的jQuery函数。

另一个想法可能是使用@ViewChild ，但是如果您在angular.io上查看指南和菜谱，将会发现很多示例。

编辑

如果毕竟这仍然不起作用，则应确保已将tooltip插件（ tooltip.js ）添加到项目中。 引导程序需要此来启用popover

Answer 2

在Angular上下文中，最好使用专用的本机库，这些库为Angular用户提供更好的API。 Angular和Bootstrap 4有一个出色的实现： https : //ng-bootstrap.github.io 。 通过使用它，您可以跳过整个jQuery / Bootstrap JS故事。

使用Bootstrap的JS意味着您将不得不加载jQuery，Bootstrap的JS并可能围绕Bootstrap的JS代码创建Angular包装器。 但是即使这样做，也会导致集成效果很差，因为jQuery和Angular都将“争夺” DOM更新-这两个库的理念非常不同。

另一方面，使用ng-bootstrap中的弹出窗口非常容易：

<button type="button" class="btn btn-secondary" placement="top"
        ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
  Popover on top
</button>

在上面的示例中，仅需要ngbPopover指令！ 您可以在工作正常的http://plnkr.co/edit/MiUo2BOPJCVkiVxRT6or?p=preview中查看操作，并在https://ng-bootstrap.github.io/#/components/popover上查看更多示例/文档。