javascript - .modal() 函数在 Angular 8 中不起作用

Question

点击时，"$("#Popup").modal('show')" 不起作用。

HTML

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

TS

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

错误消息:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_9__(...).modal is not a function

Answer 1

您可以按照以下步骤操作

npm install jquery --save
npm install @types/jquery --save

然后在架构师 => 构建 angular.json 文件的脚本部分中，我们添加 jquery lib 的路径

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

然后修改tsconfig.app.json

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

然后你可以删除这个导入，因为你已经有了 jquery 的类型定义

import * as $ from 'jquery';