在 Angular 5 中使用 cytoscape-popper 擴展

Question

我想為我的圖表添加工具提示，但我在使用 popper-extension 和 cytoscape.js 時遇到問題。 我無法導入此擴展程序，因為當我嘗試調用“use”函數時，我仍然收到錯誤消息：“無法讀取未定義的屬性‘use’”。 我使用以下命令安裝了 cytoscape 和 cytoscape-popper：npm install cytoscape 和 npm install cytoscape-popper。

下面是我的代碼的一部分 - 它看起來像在https://github.com/cytoscape/cytoscape.js-popper

import cytoscape from 'cytoscape';
import popper from 'cytoscape-popper';
cytoscape.use( popper );

你有什么想法，我做錯了什么？

Answer 1

這是您的解決方案：

import * as cytoscape from 'cytoscape';
import * as popper from 'cytoscape-popper';
cytoscape.use( popper );

Answer 2

我知道這是一個舊線程，但萬一有人再次遇到這個問題......

為了沒有編譯錯誤，請使用建議的導入結構

import * as cytoscape from 'cytoscape';
import * as popper from 'cytoscape-popper';
cytoscape.use(popper);

稍后，使用“數組表示法”訪問向 cytoscape 注冊的 popper 函數（ https://github.com/cytoscape/cytoscape.js-popper ）：

let popper1 = cy.nodes()[0].['popper']({
  content: () => {
    let div = document.createElement('div');

    div.innerHTML = 'Popper content';

    document.body.appendChild(div);

    return div;
  },
  popper: {} // my popper options here
});