3

これらのモジュールを angular2 コンポーネントにインポートする際に問題があります。AngularClass の angular2-webpack-starter を使用しています。

npm で依存関係をインストールします。

npm install jquery --save
npm install malihu-custom-scrollbar-plugin --save

そしてタイピングをインストールします：

typings install jquery --save --ambient
typings install mcustomscrollbar --save --ambient

そして、私は次のようなコンポーネントでそれを使用したい:

jQuery('.selector').mCustomScrollbar();

それを行うための最良の解決策は何ですか？

このソリューションを使用しようとしました:角度 2 内で jquery ウィジェットを使用する最良の方法は何ですか?

しかし、それは機能しません。「jQueryが定義されていません」というエラーが発生しました。

4

3 に答える 3

9

USING
Angular: 2.0.0 Typescript
: 2.0.2
Angular-cli: 1.0.0-beta.16
webpack: 2.1.0-beta.22
node: 4.6
npm: 2.15.9


回答 src/tsconfig.json に型を追加します

解決

  1. 必要なパッケージを入手する
    npm install jquery malihu-custom-scrollbar-plugin --save
    npm install @types/jquery @types/jquery-mousewheel @types/mcustomscrollbar --save-dev

  2. ルート フォルダーの angular-cli.json にプラグイン css とスクリプトを追加します。

    //angular-cli.json
"apps": [
    {
        ...,
        "styles": [
            ...,
            "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/malihu-custom-scrollbar-plugin/node_modules/jquery-mousewheel/jquery.mousewheel.js",
            "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
        ],
        ...
    }
]

  3. src/tsconfig.json に型を追加する

    //tsconfig.json
{
    "compilerOptions": {
        ...,
        "typeRoots": [
            "../node_modules/@types/"
        ],
        "types": [
            "jquery","jquery-mousewheel","mCustomScrollbar"
        ],
        ...
    }
}

  4. ディレクティブを作る

    //scrollbar.directive.ts
import {Directive, ElementRef, OnInit} from '@angular/core';
declare var $:any;  //<-- let typescript compiler know your referencing a var that was already declared

@Directive({
    selector: 'scrollbar',
    host: {'class':'mCustomScrollbar'},  //<-- Make sure you add the class
})
export class ScrollbarDirective implements OnInit {
    el: ElementRef;
    constructor(el:ElementRef) {
        this.el = el;
    }
    ngOnInit() {
        //$(function(){ console.log('Hello'); }); <--TEST JQUERY
        //check if your plugins are loading
        //$().mousewheel) ? console.log('mousewheel loaded') : console.log('mousewheel not loaded');
        //$().mCustomScrollbar) ? console.log('mCustomScrollbar loaded') : console.log('mCustomScrollbar not loaded');

        $(this.el.nativeElement).mCustomScrollbar({
            autoHideScrollbar: false,
            theme: "light",
            advanced: {
                updateOnContentResize: true
            }
    });

  5. ngModule にディレクティブを含め、コンポーネントのテンプレートに適用します

    //app.module.ts
import {ScrollbarDirective} from "./shared/UI/scrollbar.directive";
import {AppComponent} from "./app.component";

@NgModule({
...
    declarations: [
        AppComponent,
        ...,
        ScrollbarDirective
    ],
...
})
export class AppModule{}

    //app.component.ts
@Component({
    selector: 'dashboard',
    templateUrl: `
        <scrollbar>
            <div *ngFor="let thing of things">thing</div><br/>
        </scrollbar>
    `
})
于 2016-12-09T23:40:21.753 に答える
0

ページのどこかに JQuery とプラグインを含める必要があります。

于 2016-04-20T21:37:46.900 に答える
0

index.html ページに script タグを介して jquery/plugin を含める必要があります。

TypeScript を使用していると仮定すると、次のようにコンポーネントから jquery を参照できます。

import {Component, ElementRef, OnInit} from 'angular2/core';

declare var jQuery:any;
@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).mCustomScrollbar();
    }
}

詳細はこちら: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

于 2016-04-21T01:58:16.287 に答える