Angular 6 + jQuery + fullpage.js
Angular 6 + jQuery + fullpage.js
我正在尝试在没有 ngx-fullapge 的情况下使用 fullpage.js,我遇到了一些与导入相关的问题:
首先似乎 jquery 不起作用,即使安装了软件包...
在一个非常简单的 AppComponent
class 定义中,我有:
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.js 中的 fullpage()
方法。
我更新了 stackblitz:https://stackblitz.com/edit/angular-nrrujn
2018 年 11 月更新:
现在 fullPage.js 可用于 Angular:
https://github.com/alvarotrigo/angular-fullpage
不是 Angular 方面的专家,但是...也许您应该在导入后在 window 对象上声明 $?
这个呢?
import { Component, OnInit } from '@angular/core';
import jQuery from 'jquery'; // <--- change here
import * as fullpagejs from 'fullpage.js';
if(!window.$){
window.$ = jQuery;
}
第import * as $ from 'jquery';
行绝对正确。
确保 jquery 确实安装在您的项目中。 运行 npm install jquery@latest
安装它。然后从 scripts
数组中删除它,因为它不属于那里。
确保目录 './node_modules/fullpage.js/dist/jquery.fullpage.min.js'
中有 jquery.fullpage.min.js
文件
我正在尝试在没有 ngx-fullapge 的情况下使用 fullpage.js,我遇到了一些与导入相关的问题:
首先似乎 jquery 不起作用,即使安装了软件包...
在一个非常简单的 AppComponent
class 定义中,我有:
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.js 中的 fullpage()
方法。
我更新了 stackblitz:https://stackblitz.com/edit/angular-nrrujn
2018 年 11 月更新:
现在 fullPage.js 可用于 Angular: https://github.com/alvarotrigo/angular-fullpage
不是 Angular 方面的专家,但是...也许您应该在导入后在 window 对象上声明 $?
这个呢?
import { Component, OnInit } from '@angular/core';
import jQuery from 'jquery'; // <--- change here
import * as fullpagejs from 'fullpage.js';
if(!window.$){
window.$ = jQuery;
}
第import * as $ from 'jquery';
行绝对正确。
确保 jquery 确实安装在您的项目中。 运行 npm install jquery@latest
安装它。然后从 scripts
数组中删除它,因为它不属于那里。
确保目录 './node_modules/fullpage.js/dist/jquery.fullpage.min.js'
jquery.fullpage.min.js
文件