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

Question

我在Angular2中苦苦掙扎。 它不想彈出我的模態。

錯誤信息：

使用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({})
    })
  }
}

從引導中獲取模態

<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-看到了在此處添加引導程序和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 個解決方案

解決方案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