집 >웹 프론트엔드 >JS 튜토리얼 >Angular5에서 타사 js 플러그인을 호출하는 방법(자세한 튜토리얼)

Angular5에서 타사 js 플러그인을 호출하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-04 14:06:232538검색

이제 Angular5에서 타사 js 플러그인을 호출하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

더 이상 고민하지 말고 제3자 플러그인을 참조하는 가장 일반적인 세 가지 방법이 있습니다. 다음은 JQuery 기반 플러그인 nicescroll과 rangeSlider를 예로 들어 보겠습니다. .

1. 첫 번째 방법: .angular-cli.json 파일에서

구성 단계:

1 프로젝트의 .angular-cli.json 파일에서 스크립트를 찾습니다. 루트 디렉터리 필드에 배열에서 참조할 모든 js 파일을 추가합니다(순서 참고)

"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"],

2. 플러그인을 사용해야 하는 구성 요소(.ts 파일)에서 다음 명령문을 작성합니다. file): var $: any;

컴파일 오류를 방지하기 위한 목적입니다

3. 다음으로 위의 세 가지 플러그인을 ngOnInit 메소드에서 정상적으로 사용할 수 있습니다.

2. 두 번째 방법: index.html 페이지에서 플러그인을 참조합니다.

단계:

1 루트의 index.html 페이지에 다음 참조를 추가합니다. 디렉터리:

<script type="text/javascript" src="assets/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="assets/jquery.nicescroll.js"></script>

2 플러그인을 사용해야 하는 구성 요소(.ts 파일)에서 다음 명령문을 작성합니다. var $:any;

목적은 컴파일 중 오류 발생

3. 다음 위 세 가지 플러그인은 ngOnInit 메소드에서 정상적으로 사용할 수 있습니다

3. 특정 컴포넌트의 플러그인 가져오기

단계:

1. 플러그인을 사용해야 하는 ts 파일에 다음 참조를 추가합니다.

import "assets/jquery-3.2.1.js"; 
import "assets/jquery.nicescroll.js"; 
import "assets/ion.rangeSlider.js";

2. 플러그인을 사용해야 하는 컴포넌트에 다음 명령문을 작성합니다(in). .ts 파일): 선언 var $:any;

목적은 컴파일 오류를 방지하는 것입니다.

3 다음으로 위의 세 가지 플러그인을 ngOnInit 메서드에서 정상적으로 사용할 수 있습니다. 주의해야 할 사항에 대해 이야기해 보겠습니다. 처음 두 가지 방법은 서비스를 다시 시작해야 합니다. (저는 ngserv를 사용하고 있었는데, 세 번째 방법은 작동하지 않습니다.) 서비스를 다시 시작할 필요가 없으며 효과를 직접 확인할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular5에서 타사 js 플러그인을 호출하는 방법(자세한 튜토리얼)

관련 기사