Question

我在Angular2中与jQuery挣扎。它并不想弹出我的模态。

错误讯息：

使用Angular-cli npm install然后使用yarn来安装bootstrap +

在我的.angular-cli.json中我得到了。

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

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 },
];

创建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({})
    })
  }
}

从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>

我的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 { }

我的index.html - 在这里看到了添加bootstrap和jquery的解决方案。它没有解决我的问题。

<!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>

希望有人会帮忙:)。

Answer 1

问题似乎是引导程序具有捆绑版本jQuery，而您的全局版本缺少引导程序使用的.modal插件。

您可以在Angular-cli.json脚本中包含引导版本的jquery，也可以显式安装.modal插件并将其包含在Angular-cli.json中

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

1 个答案: