Question

在一个angular4项目中，我必须使用自定义引导程序。按照互联网上的一些帖子，我用angular cli创建一个测试项目，然后在angular-cli.json中导入jquery.js和自定义bootstrap.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>
--------------------------------------------------

app.ts

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中创建了一个projet来显示问题。

Answer 1

有2个jquery实例：一个是通过angular-cli全局导入创建的，另一个是在组件中导入的。

全局导入的一个具有bootstrap函数modal（）。但不是组件中的那个。

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

1 个答案: