在 Angular 项目中使用自定义引导程序

Question

在一个 angular4 项目中，我必须使用自定义引导程序。 关注互联网上的一些帖子，我用 angular cli 创建了一个测试项目，并在 angular-cli.json 中导入 jquery.js 和自定义引导.js和 css。 但是在打字稿中调用 boostrap js 函数时出现错误。

这是我的问题的描述：

app.html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" onclick="$('#myModal').modal();">
Launch demo modal 2
</button>   <-- this button works
<button type="button" class="btn btn-primary btn-lg" (click)="showmodal()">
Launch demo modal
</button>  <-- this button does not work, get modal is not a function error.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
--------------------------------------------------

应用程序

import { Component} from '@angular/core';
import * as $ from 'jquery';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
showmodal() {
console.log($('#myModal').before());
($('#myModal') as any).modal(); <-- error on this line, modal is not a function
}
}

这是我在angular-cli.json中添加的内容

"styles": [
"./assets/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"./assets/js/bootstrap.min.js"
],

更新 1 ： 我检查了另一个问题/答案，它的工作方式类似于我的启动演示模式 2。不是我要找的。

更新2：浏览器中出现错误。我在 github 中创建了一个项目来显示问题。

Answer 1

有 2 个 jQuery 实例：一个是通过 Angular-CLI 全局导入创建的，其他的是在组件中导入的。

全局导入的那个具有引导函数 modal((。 但不是组件中的那个。