이 기사에서는 Angular2가 다른 플러그인을 통합하는 방법에 대한 자세한 분석을 제공합니다. 관심 있는 친구는 이 기사에서 배울 수 있습니다.
머리말: 요즘 많은 친구들이 Angular2를 접하게 되면 필연적으로 다른 타사 플러그인을 사용하게 되며 이러한 플러그인은 jQuery를 기반으로 할 수 있으며 여기에는 해당 버전의 Angle2가 없습니다. 이 경우 타사 jQuery 플러그인을 통합하는 방법을 설명하겠습니다. 통합 아이디어와 프로세스를 설명하기 위해 Angular2의 zTree 통합을 예로 듭니다.
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를 소개한 후, 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 파일에 다음 코드를 추가합니다:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
