web-dev-qa-db-fra.com

Angular 5 + L'info-bulle d'amorçage ne fonctionne pas

Qu'est-ce que je fais mal? 

J'essaie de faire en sorte que Bootstrap Tooltip fonctionne avec Angular 5. Nous avons configuré la bibliothèque Javascript via le pied de page de la page index.html, comme recommandé. Les documents sur Bootstrap utilisent JQuery pour récupérer les éléments, puis appelez la fonction tooltip() sur eux.

Pensant que je pourrais peut-être faire la même chose, mais en utilisant la fonction getElementById pour obtenir un descripteur sur le bouton, j’écris ce qui suit (le bouton est l’élément ayant une info-bulle définie):

  ngAfterViewInit(){
    let button = document.getElementById('tooltipBtn');
    button.tooltip();
  }

Code de modèle (fichier séparé):

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="tooltipBtn">
  Tooltip on bottom
</button>

L'erreur que je reçois (dans la console du navigateur):

ERROR
Error: button.tooltip is not a function
javascriptangularbootstrap-4angular5
6
theMayer

Donc, il y a quelques choses que je devais faire pour que cela fonctionne correctement.

Angular.JSON (Angular 6)

Dans ce fichier, il est nécessaire de mettre les liens Javascript et CSS pour bootstrap. Le fichier s'appelait auparavant .angular-cli.json dans les versions précédentes, et il est d'un niveau plus profond. Par conséquent, si vous avez ce fichier, vous devrez le créer ../node_modules. Dans tous les cas, vous aurez quelque chose comme ce qui suit:

  "styles": [
   "src/styles.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/tether/dist/js/popper.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Cela chargera les CSS et Javascript appropriés dans votre pack Web, de manière à ce qu'il soit accessible de manière globale. Il est très important de les charger dans le bon ordre, comme indiqué. Les variations échoueront. Des instructions plus détaillées peuvent être trouvées ici .

* .component.ts

Dans chacun de vos composants, pour utiliser l'opérateur $, il vous suffit, en haut du fichier, de saisir 

declare var $;

C'est tout. Vous n'obtiendrez pas la saisie semi-automatique, mais l'application fonctionnera une fois compilée.

Travailler avec d'autres bibliothèques JS

Ceci s'applique également, par exemple, à lodash (l'opérateur _) et à de nombreuses autres bibliothèques Javascript. Il est également possible avec de nombreuses bibliothèques d'utiliser, par exemple,

import * as $ from 'jquery' - Cependant, pour une raison quelconque, je n'ai pas trouvé que cela soit fiable avec la bibliothèque jquery elle-même. Cela a fonctionné pour beaucoup d'autres, y compris moment.js et shortid .

1
theMayer

Vous pouvez utiliser ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Importer NgbModule dans votre module d'application

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

 imports: [
    NgbModule.forRoot(),
  ],

HTML:

 <button class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip Text..!!">
4
anud33p