在 Angular 5 中使用 cytoscape-popper 扩展答案

【问题标题】：Usage cytoscape-popper extension in Angular 5在 Angular 5 中使用 cytoscape-popper 扩展
【发布时间】：2018-05-21 10:24:08
【问题描述】：

我想为我的图表添加工具提示，但我在将 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 );

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

【问题讨论】：

我正在和你一样进行导入。但我做popper(cytoscape); 看起来不错

标签： angular angular5 cytoscape.js

【解决方案1】：

这是你的解决方案：

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

【讨论】：

【解决方案2】：

我知道这是一个旧线程，但万一有人再次遇到这个问题......

为了不出现编译错误，请使用建议的导入结构

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

稍后，使用“数组表示法”访问注册到 cytoscape (https://github.com/cytoscape/cytoscape.js-popper) 的 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
});

【讨论】：