OpaqueToken jQuery Angular-cli // _this。$（…）.modal不是函数

Question

I'm struggling with jQuery in Angular2. 我在Angular2中苦苦挣扎。 It doesn't wanna popout my modal. 它不想弹出我的模态。

Error message: 错误信息：

Used Angular-cli npm install and then yarn to install bootstrap + 使用Angular-cli npm install，然后用yarn来安装bootstrap +

In my .angular-cli.json i've got. 在我的.angular-cli.json中，我有。

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

jQuery.service.ts jQuery.service.ts

import { OpaqueToken } from '@angular/core';

export const JQ_TOKEN = new OpaqueToken('jQuery');

// return the global instance of jquery
export function jQueryFactory() {
  return window['jQuery'];
}
// providers
export const JQUERY_PROVIDER = [
  { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Created modal-trigger.directive.ts 创建了modal-trigger.directive.ts

import { Directive, OnInit, Inject, ElementRef } from '@angular/core';
import { JQ_TOKEN } from '../services/jQuery.service';

@Directive({
  selector: '[appModalTrigger]'
})
export class ModalTriggerDirective implements OnInit {

  private el: HTMLElement;

  constructor(ref: ElementRef, @Inject(JQ_TOKEN) private $: any) { 
    this.el = ref.nativeElement;
  }

  ngOnInit() {
    this.el.addEventListener('click', e => {
      this.$('#vote-modal').modal({})
    })
  }
}

Took modal from bootstrap 从引导中获取模态

<div class="modal fade" id="vote-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

My app.module.ts 我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';


import { JQUERY_PROVIDER } from './services/jQuery.service';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MovieListComponent } from './movies/movie-list/movie-list.component';
import { FooterComponent } from './footer/footer.component';
import { SearchBarComponent } from './movies/search-bar/search-bar.component';
import { MovieService } from './services/movie.service';
import { MovieDetailComponent } from './movies/movie-detail/movie-detail.component';
import { appRoutes } from './routes';
import { MoviesComponent } from './movies/movies.component';
import { VoteModalComponent } from './movies/vote-modal/vote-modal.component';
import { ModalTriggerDirective } from './triggers/modal-trigger.directive';



@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MovieListComponent,
    FooterComponent,
    SearchBarComponent,
    MovieDetailComponent,
    MoviesComponent,
    VoteModalComponent,
    ModalTriggerDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    MovieService,
    JQUERY_PROVIDER
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

And my index.html - saw solutions with adding bootstrap and jquery over here. 我的index.html-看到了在此处添加引导程序和jquery的解决方案。 It didn't resolve my problem. 它没有解决我的问题。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>MovieRating</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Alike+Angular" rel="stylesheet">

</head>

<body>
  <app-root>Loading...</app-root>
</body>

</html>

Hope someone will help :) 希望有人会帮助:)

Answer 1

The problem looks like bootstrap has a bundled version of jQuery and your global version is missing the .modal plug-in that bootstrap uses. 该问题看起来像引导程序具有jQuery的捆绑版本，而您的全局版本缺少引导程序使用的.modal插件。

You could include bootstrap's version of jquery in your Angular-cli.json scripts, or you could explicitly install the .modal plugin and include that in your Angular-cli.json 您可以在Angular-cli.json脚本中包含引导程序的jquery版本，也可以显式安装.modal插件并将其包含在Angular-cli.json中。

OpaqueToken jQuery Angular-cli // _this。$（…）.modal不是函数

问题描述

1 个解决方案

解决方案1
0 2018-07-14 21:21:39

OpaqueToken jQuery Angular-cli // _this。$（…）.modal不是函数

问题描述

1 个解决方案

解决方案1 0 2018-07-14 21:21:39

解决方案1
0 2018-07-14 21:21:39