代码之家  ›  专栏  ›  技术社区  ›  Natalie Perret

角度6+jquery+fullpage.js

  •  1
  • Natalie Perret  · 技术社区  · 6 年前

    我正在尝试使用不带ngx fullapge的fullpage.js,我面临一些与导入相关的问题:

    首先,jquery似乎不起作用,即使包已设置…

    在一个非常简单的 AppComponent 我的类定义:

    import { Component, OnInit } from '@angular/core';
    import * as $ from 'jquery';
    import * as fullpagejs from 'fullpage.js';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
    })
    export class AppComponent  implements OnInit {
      public items = [1, 2, 3];
    
      public ngOnInit() : void {
        $('#fullpage')
      }
    }
    

    使用非常简单的模板:

    <div id="fullpage">
    
      <div class="section" id="landing">
        Landing
      </div>
    
      <div class="section" *ngFor="let item of items; let i = index" id="document_{{ i }}">
        Document {{ item }}
      </div>
    
      <div class="section" id="general-information">
        General Information
      </div>
    
    </div>
    

    以及 angular.json 具有以下脚本:

     "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/fullpage.js/dist/jquery.fullpage.min.js"
            ]
    

    我有以下错误:

    ERROR
    Error: $ is not a function
    

    我在这里创建了一个在线项目来复制这个问题: https://stackblitz.com/edit/angular-nrrujn

    如何在这个项目中同时使用jquery和fullpage.js?

    [编辑]

    jquery与 import $ from 'jquery'; 但是 fullpage() 仍然找不到fullpage.js中的方法。 我更新了Stackblitz: https://stackblitz.com/edit/angular-nrrujn

    3 回复  |  直到 5 年前
        1
  •  1
  •   Alvaro    5 年前

    更新日期:2018年11月:

    现在,fullpage.js可用于角度: https://github.com/alvarotrigo/angular-fullpage


    不是角度方面的专家,但是…也许您应该在导入窗口对象之后在其上声明$

    这个怎么样?

    import { Component, OnInit } from '@angular/core';
    import jQuery from 'jquery'; // <--- change here
    import * as fullpagejs from 'fullpage.js';
    
    if(!window.$){
        window.$ = jQuery;
    }
    
        2
  •  2
  •   Param Mittal    6 年前

    确保jquery.fullpage.min.js文件存在于目录='./node ou modules/fullpage.js/dist/jquery.fullpage.min.js'

        3
  •  1
  •   Alex    6 年前

    这条线 import * as $ from 'jquery'; 是绝对正确的。

    确保jquery实际上安装在您的项目中。跑 npm install jquery@latest 安装它。然后将其从 scripts 数组,因为它不属于那里。