Bootstrap-Popover mit eckigen 2 App

Question

In der App angular 2, ich ein Popover anzeigen, wenn eine Schaltfläche mit jQuery geklickt. Aber Typoskript wirft einen Fehler

Object doesn't support property or method 'popover' 

Meine Komponente

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

     }); 
    } 

Typoskript Zusammenstellung ist in Ordnung. Aber wenn ich die App starte und auf diese Schaltfläche klicke, um das Popup anzuzeigen, wird der obige Fehler angezeigt.

Aber andere Bootrap-Standardfunktionen funktionieren wie erwartet (Navigationsleiste, Dropdown).

Answer 1

this ist, dass nicht ..

this bezieht sich auf die CalendarComponent Klasse. Ich schlage vor, ein wenig mehr in den Tutorials zu suchen. TypeScript/ES6 hat das nette Feature, dass Sie sich nicht mehr um den this Kontext kümmern müssen. Solange Sie () => {} Pfeil Funktion Notationen verwenden.

In der Zwischenzeit können Sie so etwas wie dies versuchen:

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

Sie die Ereigniseigenschaft innerhalb eines Templates zugreifen können die $event Variable. Dies wird eine MouseEvent auf Klick enthalten. MouseEvent hat eine currentTarget-Eigenschaft, die das HtmlElement enthält, auf dem das Ereignis platziert wurde. Von dort können Sie Ihre jQuery Funktion initialisieren.

Eine andere Idee könnte sein, @ViewChild zu verwenden, aber Sie finden viele Beispiele, wenn Sie die Führer und die Kochbücher bei angular.io heraus überprüfen.

bearbeiten

Wenn nach all dem es immer noch nicht funktioniert, sollten Sie sicher, dass Sie den Tooltip Plugin machen hinzugefügt (tooltip.js) zu Ihrem Projekt. Bootstrap benötigt dies, um popover

Answer 2

Im Angular-Kontext ist es besser, eine dedizierte, native Bibliotheken zu verwenden, die viel bessere API für die Angular-Benutzer bieten. Es gibt eine ausgezeichnete Implementierung für Angular und Bootstrap 4: https://ng-bootstrap.github.io. Wenn Sie es verwenden, können Sie die gesamte jQuery/Bootstrap JS Geschichte überspringen.

Mit Bootstrap JS bedeutet, dass Sie jQuery, Bootstrap JS und möglicherweise erstellen Angular Wrapper um Bootstrap JS-Code laden müssen. Aber selbst dies würde zu einer ziemlich schlechten Integration führen, da sowohl jQuery als auch Angular über DOM-Updates "kämpfen" würden - die Philosophie dieser beiden Bibliotheken ist sehr unterschiedlich.

Auf der anderen Seite popovers von ng-bootstrap ist sehr einfach:

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

Im obigen Beispiel ngbPopover Richtlinie ist alles, was benötigt wird! Sie können in Aktion in einem funktionierenden Plunk http://plnkr.co/edit/MiUo2BOPJCVkiVxRT6or?p=preview sehen und überprüfen Sie weitere Beispiele/Dokumentation auf https://ng-bootstrap.github.io/#/components/popover