Angular2에 다른 플러그인을 통합하는 방법의 자세한 예

요즘에는 많은 친구들이 Angular2를 접할 때 필연적으로 다른 타사 플러그인을 사용하게 됩니다. 이러한 플러그인은 jQuery를 기반으로 할 수 있으며 이에 해당하는 Angle2 버전이 없습니다. 이 경우 타사 jQuery 플러그인을 통합하는 방법. 통합 아이디어와 프로세스를 설명하기 위해 Angular2의 zTree 통합을 예로 듭니다. 이 기사에서는 주로 Angular2가 다른 플러그인을 통합하는 방법을 자세히 분석합니다. 관심 있는 친구는 이로부터 배울 수 있습니다.

zTree 공식 웹사이트: http://www.treejs.cn/v3/main.php#_zTreeInfo

1. 일반적으로 zTree와 같은 플러그인을 통합하려면 먼저 zTree의 온라인으로 직접 이동합니다. 예를 들면 다음과 같습니다:

https://github.com/zTree/zTree_v3/blob/master/demo/cn/super/metro.html

렌더링은 다음과 같습니다:

2. 이후 이 효과를 확인하면서 이 예제의 코드를 살펴보겠습니다. 핵심 코드는 다음과 같습니다.

$(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 });

이 코드에서는 jQuery가 사용됩니다. zTree를 통합하려면 먼저 jQuery를 도입해야 합니다. 그러니 zTree를 어떻게 통합할지 고민하지 말고 먼저 jQuery를 어떻게 도입할지 고민해보자:

3. 사용하는 플러그인이 jQuery에 의존하지 않는다면, jQuery를 도입해보자. 이 단계를 건너뛰세요. 하지만 일반적으로 타사 플러그인에서는 이 단계를 사용합니다. 그렇죠? jQuery를 소개하는 것은 상대적으로 간단합니다. index.html 파일에 소개하면 됩니다.

소개한 후, jQuery가 성공적으로 도입되었는지 테스트해야 합니다. ng g c 데모 명령을 사용하여 jQuery가 성공적으로 도입되었는지 테스트하는 구성 요소를 생성합니다.

Angular-cli가 필요한 파일을 생성한 것을 볼 수 있습니다. 그런 다음 데모.comComponent.ts 파일을 열고 import 문 뒤에 다음 콘텐츠를 추가합니다.

declare var $ : any;
import { Component, OnInit } from '@angular/core';declare var $ : any;
@Component({selector: 'app-demo',templateUrl: './demo.component.html',styleUrls: ['./demo.component.css']})export class DemoComponent implements OnInit {
constructor() { }
ngOnInit() {console.log($);}

}

위 이후 코드가 추가되었습니다. 브라우저의 콘솔 출력을 확인하세요:

 출력은 우리가 일반적으로 $를 사용하는 jquery 객체입니다. 이 시점에서 우리는 프로젝트에 jQuery를 성공적으로 도입했습니다.

4. 프로젝트에 zTree의 js 라이브러리와 CSS 라이브러리를 도입합니다. index.html 파일에 다음 코드를 추가합니다: