アングル2のブートストラップポップオーバー

Question

アングル2のアプリでは、jQueryを使用してボタンをクリックするとポップオーバーが表示されます。しかし、私のコンポーネント

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

     }); 
    } 

活字体のコンパイルが

Object doesn't support property or method 'popover' 

エラーを投げ活字体は大丈夫です。しかし、私は、アプリケーションを実行し、ポップアップを表示するには、そのボタンをクリックすると、上記のエラーをスローします。

しかし、他のブーストラップのデフォルト機能が期待通りに機能しています（ナビゲーションバー、ドロップダウン）。

Answer 1

thisはそれではない..です

this

は CalendarComponentクラスを指します。チュートリアルをもう少し見てみることをお勧めします。 TypeScript/ES6には、文脈についてもう心配する必要はありません。限り、 () => {}矢印機能の表記を使用しています。あなたは $event変数を使用して、テンプレート内イベントプロパティにアクセスすることができます

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

：あなたはこのような何かを試すことができます一方

。クリックするとMouseEventが表示されます。 MouseEventには、イベントが配置されたHtmlElementを含むcurrentTargetプロパティがあります。そこからあなたのjQuery機能を開始することができます。

@ViewChildを別のアイデアに使うこともできますが、ガイドと料理の書籍をangular.ioでチェックアウトするとたくさんの例が見つかります。

編集

すべてこの後、それはまだ動作しない場合は、必ずあなたのプロジェクトにツールチッププラグイン（tooltip.js）を追加すべきです。ブートストラップでこれを有効にするにはpopover

Answer 2

角度のあるコンテキストでは、Angularユーザーにとってより優れたAPIを提供する専用のネイティブライブラリを使用することをお勧めします。角度とブートストラップ4：https://ng-bootstrap.github.ioの優れた実装があります。それを使用することで、jQuery/Bootstrap JSの話全体をスキップすることができます。

ブートストラップのJSを使用すると、jQuery、ブートストラップのJSをロードし、ブートストラップのJSコードを中心にアンギュララッパーを作成する必要があります。しかし、そうすることでも、jQueryとAngularの両方がDOMアップデートと戦うことになるので、統合がむずかしくなるでしょう.2つのライブラリの哲学はと非常に異なります。です。 ng-bootstrapからpopoversを使用して一方

は非常に簡単です：

<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のサンプル/ドキュメントを確認できます。