Angular Context Menu 是一个允许用户在页面上右击内容来打开菜单的 Angular 组件。这篇教程将向您展示如何使用组件。让我们开始吧！
安装和引入
使用 Angular Context Menu 的第一步是将它安装到你的项目中。在你的项目目录下运行下面的命令：
npm install angular-context-menu --save
一旦你安装了它，你就可以在你的模块中引入 Angular Context Menu：
import { NgxContextMenuModule } from 'ngx-contextmenu';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxContextMenuModule],
bootstrap: [AppComponent]
})
export class AppModule { }使用
使用 Angular Context Menu 的第二步是将组件插入到你的模板中。
在模板中，在你想要指定上下文菜单的元素上添加 contextmenu 事件监听器：
<div (contextmenu)="onContextMenu($event)">Right-click me</div>
这个例子中，我们使用 (contextmenu) 事件来指定右键单击事件在该元素上触发，并将 $event 传递给 onContextMenu 函数。现在让我们在组件中添加一个控制器，以便当用户右击元素时就会显示菜单。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ----- - -
- ----- ----- --- --------- -- -- ----------- -----
- ----- ----- --- --------- -- -- ----------- -----
- ----- ----- --- --------- -- -- ----------- ----
--
------ -------------------- ----------- ----- --- - ----------- ---- -
----------------------
------------ ----------
------
----
---
-----------------------
------------------------
-
-------------------------------- - ------- ---- --
------ ------ ---------------------
-在这里，我们将数组传递给 items，并为每个项目指定名称和回调函数。onContextMenu 方法将显示菜单，这个方法是 Angular Context Menu 组件的一部分，我们可以使用它来调用一些方法来显示菜单，如上例中的 this.menu1.show.next()。注意，在菜单中传递的项目与右键单击的项目相同。
一个完整的例子
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------------- - ---- ------------------
------------
--------- -----------
--------- -
---- ------------------
----------- ------- ---- - ---------
----
---------------------
----
--- ------------------------------------ ------ ----------- ---- -- -------------------------
-----
------------- -------
--- ----------------------
--- ------------------------- ----------- ---- -- -------
-- --------------------------
-----
---------------
------
--
------- --
---------- -
-------- -----
--------------- -------
------------ -------
-
-- -
----------- -------
-
-- -
------ -----
------ ------
-
-- -
---------------- -----
-------- -----
---------------- -------------
-------- --
-
-- -
------ ------
------- ------
----------------- --------
-------------- ----
----------- -------
------------ ------
------- --------
-
-------- -
----------------- --------
-
--
--
------ ----- ------------ -
------ ----- - -
- ----- ----- --- --------- -- -- ----------- -----
- ----- ----- --- --------- -- -- ----------- -----
- ----- ----- --- --------- -- -- ----------- ----
--
------ -------------------- ----------- ----- --- - ----------- ---- -
----------------------
------------ ----------
------
----
---
-----------------------
------------------------
-
-------------------------------- - ------- ---- --
------ ------ ---------------------
-组件选项
Angular Context Menu 组件有许多选项，可以根据您的需要进行自定义，例如您可以指定在哪里显示菜单，添加分隔符等等。
在指定位置显示
<context-menu #menu1 [trigger]="'click'" [position]="{x: $event.clientX, y: $event.clientY}">添加分隔符
<context-menu #menu1>
<li [divider]="true"></li>
<li (click)="item.callback()" *ngFor="let item of items">
<a href="#">{{item.name}}</a>
</li>
</context-menu>结论
Angular Context Menu 是一个很简单但是功能丰富的 Angular 组件，它可以使你的应用程序更加好用和灵活。使用本教程，你应该能够开始在你的应用中使用 Angular Context Menu。如果你需要更多的信息或帮助，请查看 Angular Context Menu 的 GitHub 页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b9381e8991b448d9394