.Net Core Angular 2 JQuery

Question

Мне нужно использовать функцию jquery, когда мой угловой компонент закончен. Я нашел использование ниже, но я не мог заставить его работать.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 
 
import { Http } from '@angular/http'; 
 
declare var $:any; 
 
@Component({ 
 
    selector: 'nav-menu', 
 
    template: require('./NavMenu.component.html') 
 
}) 
 
export class NavMenuComponent implements AfterViewInit { 
 
    @ViewChild('selectElem') el: ElementRef; 
 
    public navigation: IMenuItem[]; 
 
    constructor(http: Http) { 
 
     http.get('http://localhost:52908/api/PageManager/Get?applicationID=3') 
 
      .subscribe(res => this.navigation = res.json().TransactionResult); 
 
    } 
 
    ngAfterViewInit(): any { 
 
     $(this.el.nativeElement).find('nav ul').jarvismenu({ 
 
      accordion: true, 
 
      speed: true, 
 
      closedSign: '<em class="fa fa-plus-square-o"></em>', 
 
      openedSign: '<em class="fa fa-minus-square-o"></em>' 
 
     }); 
 
    } 
 
} 
 
export interface IMenuItem { 
 
    PageID: number; 
 
    Code: string; 
 
    ApplicationID?: number; 
 
    DisplayText: string; 
 
    IconPath: string; 
 
    ParentID?: number; 
 
    IsFolder: boolean; 
 
    IsDefault: boolean; 
 
    ParentPage?: IMenuItem; 
 
    ChildPages: IMenuItem[]; 
 
    BreadCrumb: string; 
 
}

Когда я запускаю этот код, я получаю сообщение об ошибке, что $ не определен. Я попробовал его с переменной числа, он дал ту же ошибку. Кажется, я не могу объявить что-либо вне класса.

Я использую webpack too btw.

Спасибо.

Answer 1

Просто оберните код JQuery в try catch, который может вам помочь, также объявите перед использованием $.

ngAfterViewInit(): any { 
     try{ 
     $(this.el.nativeElement).find('nav ul').jarvismenu({ 
      accordion: true, 
      speed: true, 
      closedSign: '<em class="fa fa-plus-square-o"></em>', 
      openedSign: '<em class="fa fa-minus-square-o"></em>' 
     }); 
     } 
     catch(exception){} 
    } 

Answer 2

Когда вы используете webpack, вы должны сказать ему, чтобы установить $ как глобальную переменную. Я нашел этот раствор:

Установить экспонента-загрузчик. В файле поставщика (или любой другой, который вы используете для импорта JQuery) типа

import 'expose?jQuery!jquery'; 

В WebPack плагины раздел использования ProvidePlugin

new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' })

Answer 3

Вы проверяли вне InjectionToken? В основном вы будете вводить глобальный экземпляр jQuery в ваше приложение. Как видно в этом посте здесь: Use jQuery in Angular/Typescript without a type definition.

Вы создадите jQueryService.ts, который определит глобальный экземпляр.

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

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

export function jQueryFactory() { 
    return window['jQuery']; 
} 

export const JQUERY_PROVIDER = [ 
    { provide: JQ_TOKEN, useFactory: jQueryFactory }, 
]; 

После того, как вы должны вам нужно импортировать его в вашем app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 

import { JQ_TOKEN } from './jQuery.service'; 

declare let jQuery: Object; 

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ 
     { provide: JQ_TOKEN, useValue: jQuery } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Так что вы можете использовать его в вашем component.ts

import { Component, Inject } from '@angular/core'; 
import { JQ_TOKEN } from './jQuery.service'; 

@Component({ 
    selector: "selector", 
    templateUrl: 'somefile.html' 
}) 
export class SomeComponent { 
    constructor(@Inject(JQ_TOKEN) private $: any) { } 

    somefunction() { 
     this.$('...').doSomething(); 
    } 
}