Angular 2中的第三方庫

Question

我在項目中添加了第三方程序包（jquery，colorbox）。 首先，我在npm上安裝throw，然后將其添加到“ angular-cli.json”中

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/jquery-colorbox/jquery.colorbox.js", ....

我在組件中聲明

declare var $:any;
declare var colorbox:any;
and the code

ngAfterViewInit(){
    $(document).ready(function(){
      $(".alma1").colorbox({rel:'alma1'});
    });
}

和視圖

<a class="alma1" href="{‌{pic.pictureURL}}" title="{‌{pic.desc}}">
    <img class="alma" src="{‌{pic.pictureURL}}" alt="{‌{pic.desc}}">    
</a>

當我第一次單擊該鏈接時，它將帶我到google firebase存儲鏈接頁面，而當我返回該網頁並再次單擊該鏈接之后，則colorbox包運行正常。 我在ngAfterViewInit（）中調用了，但是看起來好像不存在。 為什么第一次不工作？

Answer 1

您需要使用一個加載程序將jQuery庫傳遞給angular 2項目。 並且還需要確保jquery類型在您的轉換時間內可用。

您可以使用systemjs loader並在系統配置中在配置中添加jquery路徑，您的打字稿將理解jquery。

如果您將使用systemjs loader，則它也將在瀏覽器中可用。