jQuery bxSlider 插件在 Angular 4 中不起作用答案

【问题标题】：jQuery bxSlider Plugin not working in Angular 4jQuery bxSlider 插件在 Angular 4 中不起作用
【发布时间】：2017-11-25 08:58:03
【问题描述】：

我是 Angular 5 框架的初学者。我已经创建了一个项目并正在处理它，但我遇到了 bxSlider 的问题。我在 myangular 项目中添加了一个 bxSlider 插件。第一次加载时似乎没问题。但是当我点击其他页面链接并返回到我的索引页面时，bxSlider 插件不起作用。

1) 这是 cutsom.js 文件。

$(document).ready(function($) {

$('.homeSlider').bxSlider({
    speed: 1500,
    pause: 5000,
    mode: 'fade',
    captions: true,
    auto: false,
    infiniteLoop: true,
    stopAuto: false,
    pager: false,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
});

});

2) app.component.ts 文件

declare var jquer:any;
declare var $:any;

我已经在我的组件文件中声明了 jquery 和 $ 对象。

当网站加载它看起来像这样。

在我更改页面并返回到我的索引页面后，整个滑块崩溃了。

【问题讨论】：

应该是declare var jquery:any;吗？您是否在 jquery 的 app.component 中添加了类型定义参考？
这是我的 app.component.ts 文件代码prntscr.com/hf0ky6。我已经用“var”替换了“let”。但它仍然无法正常工作。滑块一开始可以正常工作，但在我更改链接并返回索引页面后它就不起作用了。
你可以发布代码而不是在外部网站上
好的。这是我的 app.component.ts 文件代码。从'@angular/core'导入{组件}；声明 var jquery:any;声明 var $:any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) 导出类 AppComponent { title = 'App Wroks!' ; }

标签： jquery angular typescript angular-cli

【解决方案1】：

将代码从 custom.js 移动到组件文件中的 ngOnInit() {} 生命周期方法。每当加载组件时，它都会初始化滑块。无需编写文档就绪函数。

【讨论】：

从'@angular/core'导入{ OnInit }；类 AppComponent 实现 OnInit { ngOnInit() { $('.homeSlider').bxSlider({ speed: 1500, pause: 5000, mode: 'fade', captions: true, auto: false,infiniteLoop: true, stopAuto: false, pager: false, nextSelector: '#slider-next', prevSelector: '#slider-prev', }); }
非常感谢，现在它正在工作。真的很感激。
*ngFor 是一个指令，而不是生命周期连接。你的具体要求是什么
我的意思是说它可以与 ngfor 属性中的动态 imageurl 一起使用吗？
@sarojsharma 你是否在 anguar.json 文件中包含 jquery 和 bxslider JS？