.Net Core Angular 2 Jquery 声明答案

【问题标题】：.Net Core Angular 2 Jquery decleration.Net Core Angular 2 Jquery 声明
【发布时间】：2016-12-09 05:27:05
【问题描述】：

当我的角度组件生成完成后，我需要使用 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。

谢谢。

【问题讨论】：

你在代码中使用 jquery 吗？
是的，我正在 html 中加载 jquery。它的工作原理我已经测试过了。
通过打字稿还是通过html？
你是在角度使用它吗？
Voa html。除了这里，没有在打字稿中使用任何 jquery。

标签： jquery asp.net-mvc angular asp.net-core webpack

【解决方案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){}
    }

【讨论】：

【解决方案2】：

当你使用 webpack 时，你应该告诉它设置 $ 为全局变量。我找到了这个解决方案：

安装暴露加载器。在您的供应商文件（或您用于导入 jquery 的任何其他文件）中输入

 import 'expose?jQuery!jquery';

在 webpack 插件部分使用 ProvidePlugin

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

【讨论】：

【解决方案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();
    }
}

【讨论】：