问题描述
我正在学习 Angular。我正在尝试将 Revolution Slider 集成到 Angular 11 网站中。我的 angular.json
文件的脚本部分如下所示。
"scripts": [
"node_modules/jquery/dist/jquery.min.js","src/assets/js/bootstrap.min.js","src/assets/js/modernizr.custom.js","src/assets/js/gmaps.js","src/assets/js/jquery.themepunch.revolution.min.js","src/assets/js/jquery.themepunch.tools.min.js","src/assets/js/extensions/revolution.extension.actions.min.js","src/assets/js/extensions/revolution.extension.carousel.min.js","src/assets/js/extensions/revolution.extension.kenburn.min.js","src/assets/js/extensions/revolution.extension.migration.min.js","src/assets/js/extensions/revolution.extension.parallax.min.js","src/assets/js/extensions/revolution.extension.slideanims.min.js","src/assets/js/extensions/revolution.extension.layeranimation.min.js","src/assets/js/extensions/revolution.extension.navigation.min.js","src/assets/js/extensions/revolution.extension.video.min.js","src/assets/js/dlmenu.js","src/assets/js/jquery.magnific-popup.js","src/assets/js/mixer.js","src/assets/js/jquery.easing.1.3.js","src/assets/js/owl.carousel.js","src/assets/js/slick.js","src/assets/js/jquery.appear.js","src/assets/js/theme.js"
]
我使用以下代码安装了 jQuery。
npm install jquery --save
我的组件如下
rev-slider.component.ts
import { Component,ElementRef,OnInit,AfterViewInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-rev-slider',templateUrl: './rev-slider.component.html',styleUrls: ['./rev-slider.component.css'
]
})
export class RevSliderComponent implements AfterViewInit {
constructor(private element: ElementRef) {}
ngAfterViewInit(): void {
($(this.element.nativeElement) as any).show().revolution({
//more text here
});
}
}
我在父组件中添加了这个组件,如下所示
<app-rev-slider></app-rev-slider>
我在控制台中遇到以下错误。
ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(...).show().revolution is not a function
解决方法
尝试改变
import * as $ from 'jquery';
到
declare var $;