Question

我将ContextMenuItem模型定义为：

export class ContextMenuItem {
    label: string;
    action?: () => void;
}

在我的课堂上，我将它们列为：

contextMenuItems: ContextMenuItem[] = [{
    label: 'Open link in new tab',
    action: () => this.openLinkInNewTab()
},
{
    label: 'Test 2',
    action: () => this.testFunc()
}];

我的自定义上下文菜单的HTML：

<div class="parent">
    <div id="test1">
        <div (pointerdown)="mouseDown($event)" class="test">Test Text</div>
    </div>

    <div class="hide" id="menu">
        <ul class="menu-items">
            <li *ngFor="let menuItem of contextMenuItems">
                <div (click)="menuItem.action()">{{ menuItem.label }}</div>
            </li>
        </ul>
    </div>
</div>

右键单击测试文本时调用代码：

mouseDown(mouseClick: PointerEvent) {
    let rightClick: number = 3;
    if (mouseClick.which !== rightClick) return;

    if (document.getElementById('test1').addEventListener) {
        document.getElementById('test1').addEventListener('contextmenu', function (event) {
            event.preventDefault();
            let element = document.getElementById('menu');
            element.classList.toggle('hide');

            element.style.position = 'absolute';
            element.style.zIndex = '1';
            element.style.top = event.layerY + 'px';
            element.style.left = event.layerX + 'px';
        }, false);
    }

    document.addEventListener('pointerdown', function (event) {
        document.getElementById('menu').classList.add('hide');
    });
}

现在，每当我尝试点击我的任何ContextMenuItem时，该功能都不会被击中。我试过在函数的开头做一个console.log，它从不显示。我也试过设置一个断点。单击某个项目时，调试器工具的网络选项卡中也没有任何内容。有什么想法吗？

Answer 1

在等待用户点击之前注册听众使用OnInit（）订阅上下文菜单点击，然后重试。

注意：使用Angular数据绑定比使用.add类本机DOM方法更好，因为旧IE中不支持

TypeScript / JavaScript：从自定义上下文菜单项调用函数

1 个答案: