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

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

ztree官方**：

1.一般我在想要將像ztree這種外掛程式整合進來的時候，我會先直接去看ztree它們的**例子，比如說這個例子：

效果圖是這樣的：

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

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

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

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

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

![輸入說明]( "在這裡輸入標題")你會看到，angular-cli已經幫我們生成了必要的檔案，然後我們開啟demo.component.ts檔案，在import語句後面新增以下內容：

declare var $ : any;

import from '@angular/core';declare var $ : any;

@component()export class democomponent implements oninit

ngoninit()

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

![輸入說明]( "在這裡輸入標題")會發現輸出的就是我們平時使用到的jquery物件$。到此，我們就算成功引入jquery到專案中了。

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

```這樣之後，我們就可以測試ztree是否正常引入進來了，我們在demo.component.ts檔案中的ngoninit方程式設計客棧法中新增以下**：```console.log($.fn.ztree);```檢視控制台會發現，以下輸出：![輸入說明]( "在這裡輸入標題")在輸出的內容我們可以看到，有ztree用來初始化的init方法，這樣我們就可以真正的來寫乙個ztree的例子了。

5.ztree例子

我們通過檢視ztree的初始化**，會發現，需要3個引數，其中第乙個引數是乙個jquery的物件，第二個引數是ztree的配置物件，具體可以檢視ztree的官方文件來看有哪些引數可以設定（http://www.程式設計客棧treejs.cn/v3/api.php），第三個引數是用來出事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元素

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

到這裡之後，ztree就算被我們整合進來了。效果和對應的專案**在這裡：

本文標題: angular2整合其他外掛程式的方法

本文位址: /ruanjian/j**a/218160.html

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

Angular2如何整合其他外掛程式

2 整合管理

Angular 2的元件樣式

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

Angular2如何整合其他外掛程式

2 整合管理

Angular 2的元件樣式

相關推薦