2
votes

La fonction .modal () ne fonctionne pas dans angulaire 8

Lors d'un clic, "$ (" # Popup "). modal ('show')" ne fonctionne pas.

HTML

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';
import * as bootstrap from "bootstrap"; 

export class SampleComponent implements OnInit{
    loginBtn() {
        $("#Popup").modal('show');
    }
}

<a class="btn-profile-login" data-target="#Popup" (click)="loginBtn()">{{SignText}}</a>

Message d'erreur:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_9 __ (...). modal n'est pas un fonction

javascript typescript angular angular8 single-page-application

0 commentaires

4 Réponses :

0
votes

vous devez inclure jQuery dans index.html et dans votre composant vous devez

declare var $: any;

0 commentaires

1
votes

Vous pouvez suivre ces étapes

import * as $ from 'jquery';

Ensuite, dans la section scripts de architect => build du fichier angular.json, nous ajoutons le chemin de jquery lib

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"] // addd jquery here
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

7 commentaires

Et alors ? Il demande comment utiliser jquery en angular. Je ne lui ai même pas recommandé de faire ça. Essayez d'être poli :)

S'il vous plaît arrêtez :). Passez une bonne journée

@TonyNgo obtenant l'erreur: TypeError: Impossible de lire la propriété 'typeCheckConfig' de non défini

@TonyNgo Lorsque le flux de code va à l'extrait de code: $ ("# Popup"). Modal ('show'); veuillez aider à ce sujet. Je suis nouveau à angulaire

@TonyNgo Error Msg: ProfileComponent.html: 19 ERROR TypeError: Impossible de lire la propriété 'typeCheckConfig' de undefined à Modal._getConfig (modal.js: 272) à new Modal (modal.js: 131) à HTMLDivElement. .js: 565) à Function.each (jquery.min.js: 2) à k.fn.init.each (jquery.min.js: 2) à k.fn.init._jQueryInterface [comme modal] (modal. js: 559) sur ProfileComponent.loginBtn (profile.component.ts: 164) sur Object.eval [as handleEvent] (ProfileComponent.html: 19) sur handleEvent (core.js: 36759) sur callWithDebugContext (core.js: 38377)

@TonyNgo: Merci Tony. L'inclusion de 'import * comme bootstrap depuis "bootstrap";' 'dans app.module.ts a résolu le problème.

En fait, vous n'avez pas besoin de faire cela. Vous pouvez importer le bootstrap dans votre angular.json comme ceci github.com/ngohungphuc/Presentation/blob/master/...

1
votes

Utilisez ngx-bootstrap https://valor-software.com/ngx-bootstrap/ Ce sont les composants Angular Bootstrap qui ne nécessitent pas jQuery. C'est le moyen officiel d'utiliser Bootstrap avec Angular, vous devez éviter d'inclure jquery dans les applications angulaires lorsque cela est possible

Meilleures salutations.

0 commentaires

0
votes

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
This worked for me in angular.json

0 commentaires