從Angular 2組件中調用JQuery方法

我正在創建一個以前只使用JQuery的現有項目上的Angular 2前端。當一個單獨的文件中存在JQuery函數時，是否可以在Angular 2組件中調用JQuery方法？我正在使用TypeScript編寫我的組件，以防知道這一點很重要。從Angular 2組件中調用JQuery方法

例如，我有一個名爲EditCheckBoxes.js的JavaScript文件，其名稱爲editCheckBoxes()。爲了使editCheckBoxes()正常工作，我需要在啓動某個組件後調用它。我嘗試的解決方案是這樣的：

ngOnInit(): void { 
    editCheckBoxes(); 
}

此代碼給我下面的錯誤：

Cannot find name 'editCheckBoxes'.

有什麼方法可以讓我得到這個工作？

此外，我添加了declare var $: any;到我的組件文件，所以我能夠在該組件中使用JQuery，但我寧願不將整個文件複製到我的組件以便使用它們。

編輯：

的文件夾結構如下所示：

Plan 
    app 
     selling 
     My Angular 2 component 
    Scripts 
     EditCheckBoxes.js

在我的組件，進口statment看起來是這樣的：import { editCheckboxes } from '../../Scripts/EditCheckboxes';

來源

2016-10-20 Brett

您需要導入editCheckboxes方法在你的打字稿文件使其可用。

要做到這一點，你首先需要從EditCheckBoxes.js

export function editCheckboxes() { ... }

下一頁出口editCheckboxes功能，您應該只導入您的組件

import { editCheckBoxes } from './EditCheckBoxes';

現在，它可以在被稱爲內部的功能你組件：editCheckBoxes();

來源

2016-10-20 18:49:50

這給了我，說一個生成錯誤：「無法找到模塊」 ./EditCheckBoxes' – Brett

爲了從js文件導入功能，您應該先導出它，如下所示：

// EditCheckBoxes.js 
module.exports = function editCheckBoxes() { ... };

然後在同一目錄中添加一個d.ts文件作爲您的JS文件與你的模塊定義，將由打字稿

// EditCheckBoxes.d.ts 
declare function editCheckBoxes(): void; 
export = editCheckBoxes;

被使用，那麼在您的打字稿文件中，可以指定定義文件，導入功能，並使用它像這樣：

/// <reference path="../../Scripts/EditCheckBoxes.d.ts" /> 
import editCheckBoxes = require('../../Scripts/EditCheckBoxes'); 

ngOnInit(): void { 
    editCheckBoxes(); 
}

來源

2016-10-20 19:02:28

這給了我，說一個生成錯誤：「不能˚F ind模塊'./EditCheckBoxes' – Brett

你可以顯示你的文件夾結構嗎？ –

我在我的文章 – Brett

從Angular 2組件中調用JQuery方法

回答

相關問題