Angular2를 사용하여 플러그인을 통합하는 방법(자세한 튜토리얼)

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

> ;"이후 zTree가 정상적으로 도입되었는지 테스트할 수 있습니다. 우리는 deco.comComponent.ts 파일의 ngOnInit 메소드에 다음 코드를 추가합니다: "console.log($.fn.zTree);" 콘솔을 확인하고 다음 출력을 찾았습니다.  출력 내용에서 다음이 있음을 알 수 있습니다. zTree 실제로 zTree 예제를 작성하기 위해 init 메소드를 사용합니다.

5.zTree example

zTree의 초기화 코드를 보면 3개의 매개변수가 필요한 것을 알 수 있는데, 그 중 첫 번째 매개변수는 두 번째 매개변수는 zTree의 구성 객체입니다. 자세한 내용은 zTree 공식 문서(http://www.treejs.cn/v3/)를 확인하세요. api.php) 세 번째 매개변수는 zTree 구성 개체입니다.

여기에서는 zTree의 데모 코드를 직접 사용하고 이를 deco.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);
 }

}

위 코드 $.fn을 살펴보세요. .zTree($( "#ztree"),this.setting,this.zNodes);여기서 jQuery의 ID 선택기를 사용한 다음 템플릿 파일 데모.comComponent.html

에 ztree ID를 가진 ul 요소를 추가해야 합니다.

<ul id="ztree"><ul>

왜 ul인지에 대해서는 zTree 문서를 읽어보실 수 있습니다. 물론 구현 가능한지 확인하기 위해 다른 요소를 시도해 볼 수도 있습니다.

위 내용이 여러분에게 도움이 되기를 바랍니다.

js를 사용하여 WeChat에서 앱을 호출하는 방법은 무엇인가요?

node.js에서 http 모듈을 사용하는 방법

Javascript 디버깅 명령은 무엇인가요? 및 nodeJs의 흐름

Node.js의 하위 프로세스에 대한 애플리케이션 시나리오는 무엇입니까

노드의 child_process 모듈 정보(자세한 튜토리얼)

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