帶角度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上查看更多示例/文檔。