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变量访问模板中的事件属性。这将包含点击MouseEvent。 MouseEvent有一个currentTarget属性，其中包含放置事件的HtmlElement。从那里，您可以初步确定jQuery功能。

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

修改

如果毕竟这仍然不起作用，则应确保将工具提示插件（tooltip.js）添加到项目中。 Bootstrap需要此功能才能启用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都会＃34;战斗＆＃34;通过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

Bootstrap popover with angular 2 App

2 个答案: