如何在 Angular 10 中创建圆形菜单？

Question

我想创建一个在 npmjs.com 上遇到的圆形菜单

如上所述，我使用npm install circular-menu 来安装它。

之后，我在“angular.json”中添加了样式和脚本：

       "styles": [
                    "node_modules/circular-menu/dist/css/circular-menu.css",
                    "node_modules/bootstrap/dist/css/bootstrap.min.css",
                    "src/styles.css"
                  ],
        "scripts": [
                    "node_modules/jquery/dist/jquery.min.js",
                    "node_modules/circular-menu/dist/js/circular-menu.js"
                   ]

然后，我使用此命令创建了一个组件，ng g c Components/cir-comp。如果我想在我的“cir-comp”中粘贴以下代码，我该怎么做？

主要是想问一下如何在我的应用中使用JavaScript代码？

var menu = CMenu("#menu1")
  .config({
    menus: [{
      title: "GitHub",
      icon: "fa fa-github",
      href: {
        url: "http://github.com",
        blank: true
      }
    }, {
      title: "GitLab",
      icon: ["fa fa-gitlab", '#4078c0'],
    }, {
      title: "subMenu",
      icon: "my-icon icon1",
      menus: [{
        title: 'subMenu1',
        icon: 'fa fa-firefox'
      }, {
        title: 'subMenu2',
        icon: 'fa fa-file'
      }]
    }, {
      title: "subMenu",
      icon: "my-icon icon2"
    }, {
      title: "click",
      icon: "my-icon icon3"
    }, {
      title: "hash-href",
      href: "#someHash"
    }, {
      title: "clickMe!",
      click: function() {
        alert('click event callback');
      }
    }, {
      disabled: true,
      title: "disabled"
    }]
  });



$(document).click(function() {
  menu.hide();
});
$(document).contextmenu(function(e) {
  menu.show([e.pageX, e.pageY]);
  return false;
});

.tips {
  font-size: 40px;
  color: #999;
  position: fixed;
  top: 50%;
  left: 30%;
}

.menu1 {
  left: 50%;
  top: 50%;
}

.my-icon {
  background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: 0 -56px;
}

.icon3 {
  background-position: 0 -116px;
}

<div class="tips">
  Right click in page.
</div>
<div id="menu1" class="menu1">

</div>

我正在尝试使用“cir-comp.component.ts”中的 .js 代码，但它无法识别“CMenu”。谁能告诉我如何在我的组件中使用此代码？

以下是链接：

1. https://www.npmjs.com/package/circular-menu
2. https://jsfiddle.net/yandongCoder/kL4j7xor/10/

Answer 1

我想你只需要告诉打字稿编译器CMenu 存在。您可以通过将以下行添加到 ts 文件的顶部来做到这一点：

declare const CMenu: any

Answer 2

var menu = CMenu("#menu1")
  .config({
    menus: [{
      title: "GitHub",
      icon: "fa fa-github",
      href: {
        url: "http://github.com",
        blank: true
      }
    }, {
      title: "GitLab",
      icon: ["fa fa-gitlab", '#4078c0'],
    }, {
      title: "subMenu",
      icon: "my-icon icon1",
      menus: [{
        title: 'subMenu1',
        icon: 'fa fa-firefox'
      }, {
        title: 'subMenu2',
        icon: 'fa fa-file'
      }]
    }, {
      title: "subMenu",
      icon: "my-icon icon2"
    }, {
      title: "click",
      icon: "my-icon icon3"
    }, {
      title: "hash-href",
      href: "#someHash"
    }, {
      title: "clickMe!",
      click: function() {
        alert('click event callback');
      }
    }, {
      disabled: true,
      title: "disabled"
    }]
  });



$(document).click(function() {
  menu.hide();
});
$(document).contextmenu(function(e) {
  menu.show([e.pageX, e.pageY]);
  return false;
});

.tips {
  font-size: 40px;
  color: #999;
  position: fixed;
  top: 50%;
  left: 30%;
}

.menu1 {
  left: 50%;
  top: 50%;
}

.my-icon {
  background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: 0 -56px;
}

.icon3 {
  background-position: 0 -116px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script type="text/javascript" src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>
<div class="tips">
  Right click in page.
</div>
<div id="menu1" class="menu1">

</div>

添加 Jquery 以及脚本和样式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script type="text/javascript" src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>

更新：

将 tsconfig.json 文件添加到项目中。

tsconfig.json:

{ "compilerOptions": { ..., "allowJs": true }

试试看。