Angular2如何整合其他外掛程式

我是鐘鐘發表於1個月前

效果和對應的專案**在這裡：請給我加個星，謝謝。

前言：現在有很多朋友在接觸angular2的時候，總是不可避免的會使用一些其他的第3方的外掛程式，而這些外掛程式可能都是基於jquery的，而且也沒有對應的angular2的版本，這裡我就來講解一下，在這種情況下，如何整合第3方的jquery外掛程式。我們以angular2整合ztree為例來說明整合的思路及過程。

ztree官方**：

2.看到這個效果之後，我們再來看這個例子的**：關鍵**在這裡：

$(document).ready(function()
);

這段**中使用了jquery，對吧，那我們要整合ztree進來的話，就必須先把jquery引入進來。那我們先不管怎麼來整合ztree，我們先來解決如何將jquery引入進來的問題：

3.引入jquery到angular2專案中，當然，如果你使用的外掛程式沒有依賴jquery的話可以跳過這個步驟，不過一般第3方外掛程式都依賴它，對吧。引入jquery的話，就比較簡單，只要在index.html檔案中引入進來就可以了：

<
script
src=
"node_modules/jquery/dist/jquery.min.js"
>
script
>

引入進來之後，我們需要測試下，jquery是否成功引入進來。我們使用ng g c demo命令生成乙個元件來測試jquery是否成功引入：

這句**表示我們宣告乙個$的變數，型別是any任意型別。

接著我們在ngoninit方法中，使用console.log($);來輸出$。

新增完成之後的，demo.component.ts檔案的內容如下：

import  from '@angular/core';
declare
var $ : any;
@component()
export
class democomponent implements oninit 
ngoninit() 
}

上面**新增完成之後，檢視瀏覽器的控制台輸出：

4.將ztree的js庫和css庫引入到專案中，在index.html檔案中我們新增以下**：

<
link
rel=
"stylesheet"
type
="text/css"
href
="./assets/ztree/css/metrostyle/metrostyle.css"
>
<
script
src=
"./assets/ztree/js/jquery.ztree.core.min.js"
>
script
>

這樣之後，我們就可以測試ztree是否正常引入進來了，我們在demo.component.ts檔案中的ngoninit方法中新增以下**：

console.log($.
fn.ztree);

檢視控制台會發現，以下輸出：

5.ztree例子

我們通過檢視ztree的初始化**，會發現，需要3個引數，其中第乙個引數是乙個jquery的物件，第二個引數是ztree的配置物件，具體可以檢視ztree的官方文件來看有哪些引數可以設定（第三個引數是用來出事ztree節點的資料。

這裡我們直接使用ztree中demo的**直接複製到demo.component.ts檔案中：

import  from '@angular/core';
declare var $ : any;
@component()
export class
democomponent
implements
oninit}};
znodes = [,,
,,,,
,,,,
,,,,
,,,,
,,,,
,,,,
,,];constructor() 
ngoninit() 
}

看上面的**中， $.fn.ztree($("#ztree"),this.setting,this.znodes); 這裡我們用到了jquery的id選擇器，那麼我們需要在模板檔案demo.component.html中新增乙個id為ztree的ul元素

<
ulid
="ztree"
>
<
ul>

至於為什麼是ul，可以看ztree的文件，當然你也可以試試別的元素，看能不能實現。

Angular2如何整合其他外掛程式

Angular2整合其他外掛程式的方法

Angular2 如何搭建

angular2 發布angular2模組，服務

Angular2如何整合其他外掛程式

Angular2整合其他外掛程式的方法

Angular2 如何搭建

angular2 發布angular2模組，服務

相關推薦