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 파일에 다음 코드를 추가합니다:

5.zTree example

zTree의 초기화 코드를 보면 3개의 매개변수가 필요하다는 것을 알 수 있으며 그 중 첫 번째가 필요합니다. 매개변수는 jQuery 객체이고, 두 번째 매개변수는 zTree의 구성 객체입니다. 자세한 내용은 zTree 공식 문서(http://www.treejs.cn/v3/api)에서 설정할 수 있는 내용을 확인하실 수 있습니다. .php), 세 가지 매개변수는 zTree 노드의 데이터를 생성하는 데 사용됩니다.

여기에서는 zTree의 데모 코드를 직접 사용하고 이를 데모.comComponent.ts 파일에 직접 복사합니다.

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 {
setting = {
  data: {
   simpleData: {
    enable: true
   }
  }
 };
 zNodes = [
  { id: 1, pId: 0, name: "父节点1 - 展开", open: true },
  { id: 11, pId: 1, name: "父节点11 - 折叠" },
  { id: 111, pId: 11, name: "叶子节点111" },
  { id: 112, pId: 11, name: "叶子节点112" },
  { id: 113, pId: 11, name: "叶子节点113" },
  { id: 114, pId: 11, name: "叶子节点114" },
  { id: 12, pId: 1, name: "父节点12 - 折叠" },
  { id: 121, pId: 12, name: "叶子节点121" },
  { id: 122, pId: 12, name: "叶子节点122" },
  { id: 123, pId: 12, name: "叶子节点123" },
  { id: 124, pId: 12, name: "叶子节点124" },
  { id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true },
  { id: 2, pId: 0, name: "父节点2 - 折叠" },
  { id: 21, pId: 2, name: "父节点21 - 展开", open: true },
  { id: 211, pId: 21, name: "叶子节点211" },
  { id: 212, pId: 21, name: "叶子节点212" },
  { id: 213, pId: 21, name: "叶子节点213" },
  { id: 214, pId: 21, name: "叶子节点214" },
  { id: 22, pId: 2, name: "父节点22 - 折叠" },
  { id: 221, pId: 22, name: "叶子节点221" },
  { id: 222, pId: 22, name: "叶子节点222" },
  { id: 223, pId: 22, name: "叶子节点223" },
  { id: 224, pId: 22, name: "叶子节点224" },
  { id: 23, pId: 2, name: "父节点23 - 折叠" },
  { id: 231, pId: 23, name: "叶子节点231" },
  { id: 232, pId: 23, name: "叶子节点232" },
  { id: 233, pId: 23, name: "叶子节点233" },
  { id: 234, pId: 23, name: "叶子节点234" },
  { id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true }
 ];
 constructor() { 
 }
 ngOnInit() {
  $.fn.zTree($("#ztree"),this.setting,this.zNodes);
 }

}

Look 위의 코드에서 $.fn.zTree($("#ztree"),this.setting,this.zNodes); 여기서는 jQuery의 id 선택기를 사용하고, id가 ztree인 ul 요소를 추가해야 합니다. 템플릿 파일 데모.comComponent.html

<ul id="ztree"><ul>

왜 ul인지는 zTree 문서를 읽어보면 알 수 있습니다. 물론, 이 지점에 도달한 후에는 다른 요소를 시도해 볼 수도 있습니다.

관련 권장사항:

Angular2는 WeChat을 모방하여 9개의 이미지 업로드 및 미리보기 예시 공유

angular2 라우팅 전환 애니메이션 예시 설명

Angular2에서 노드를 얻는 방법

위 내용은 Angular2에 다른 플러그인을 통합하는 방법의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!