jQuery bxSlider 플러그인이 Angular 4에서 작동하지 않습니다.

저는 Angular 5 Framework의 초보자입니다. 프로젝트를 작성하고 작업하고 있지만 bxSlider에 문제가 있습니다. myangular 프로젝트에 bxSlider 플러그인을 추가했습니다. 그것은 처음로드 할 때 확인 보인다. 하지만 다른 페이지 링크를 클릭하고 내 인덱스 페이지로 돌아 가면 bxSlider 플러그인이 작동하지 않습니다.jQuery bxSlider 플러그인이 Angular 4에서 작동하지 않습니다.

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) 파일 내 구성 요소 파일에 JQuery와 및 $ 객체 모두를 선언해야

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

을 app.component.ts.

사이트로드시 다음과 같이 보입니다.

페이지를 변경하고 전체 색인 페이지로 돌아 가면 전체 슬라이더가 고장납니다.

출처

2017-11-25 saroj sharma

'declare var jquery : any;'가되어야합니까? jquery에 대한 app.component에 형식 위반 참조를 추가 했습니까? – Niladri

내 app.component.ts 파일 코드는 http://prntscr.com/hf0ky6입니다. 나는 "let"을 "var"로 대체했다. 하지만 여전히 작동하지 않습니다. 슬라이더는 처음에는 완전히 작동하지만 링크를 변경하고 인덱스 페이지로 돌아 가면 작동하지 않습니다. –

외부 사이트가 아닌 코드를 게시 할 수 있습니까 – Niladri

이동 구성 요소 파일 내 ngOnInit() {} 수명주기 방법 custom.js의 코드. 구성 요소가로드 될 때마다 슬라이더가 초기화됩니다. 문서 준비 기능을 쓸 필요가 없습니다.

출처

2017-11-25 12:39:05

가져 오기 {OnInit} '@ angular/core'에서 가져 오기; . 1500 일시 : 5000, 모드 '페이드', 캡션 : 사실, 자동 : 거짓 클래스 AppComponent는 { ngOnInit() { $ ('. homeSlider') bxSlider ({ 속도하는 OnInit를 구현 , infiniteLoop : 사실, stopAuto : 거짓, 호출기 : 거짓, nextSelector : '# 슬라이더 - 다음', prevSelector : '# 슬라이더 - 이전', }); } –

고마워 지금은 효과가 있습니다. 정말 감사합니다. –

내부에서 작동합니까 * ngFor? –

jQuery bxSlider 플러그인이 Angular 4에서 작동하지 않습니다.

답변

관련 문제