Matériau angulaire 2 Code Jquery inclus dans le composant ne fonctionnant pas

Question

J'ai mis en place un projet avec angular2-materialize. La navigation sur la page Web doit être gérée par le HamburgerMenuComponent.

Alors j'ai commencé à inclure cette barre latérale: SideNav - Materialize

Il fonctionne très bien quand j'insérer manuellement $(".button-collapse").sideNav(); dans la console du navigateur. Mais je ne peux pas comprendre comment l'inclure à la HamburgerMenuComponent.

C'est ce que j'ai essayé jusqu'à présent, mais il ne fonctionne pas:

import { Component, OnInit, AfterViewInit } from '@angular/core'; 
import * as $ from 'jquery'; 

@Component({ 
    selector: 'app-hamburger-menu', 
    templateUrl: './hamburger-menu.component.html', 
    styleUrls: ['./hamburger-menu.component.css'] 
}) 
export class HamburgerMenuComponent implements OnInit, AfterViewInit { 

    constructor() { } 

    ngOnInit() { 
    } 

    ngAfterViewInit() { 
    $(".button-collapse").sideNav(); 
    } 
} 

AppComponent.html:1 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery(...).sideNav is not a function

Answer 1

Essayez d'éditer votre vendor.ts(nouvelle angulaire cli utilise lib.ts à la place, mais est le même) puis recompiler :

// jQuery 
declare let jQuery: any; 

// Dependencies 
window['jQuery'] = require('jquery'); 
window['$'] = window['jQuery']; 
import 'jquery-ui-npm/jquery-ui.min.js' 

Et dans votre annonce ce composant après toutes les importations:

declare let $: any;