Question

当用户按 Ctrl 点击？

时，如何捕获

我可以使用以下方式进行单击：

<input ng-click="some_function()"/>

但是我需要这样的东西：

<input ng-CTRL-click="some_nice_function()"/>

这可能吗？

Answer 1

<强> HTML

<input ng-click="some_function($event)"/>

<强> JS

$scope.some_function = function(event){
    if (event.ctrlKey)
    {
       // logic here
    }
}

Answer 2

您必须创建自己的ctrl-click指令。为此，请在编辑器中导航至“指令”文件夹并创建一个。

您可以通过终端写入来完成：

ng generate directive ctrl-click

创建后，您必须按如下所示对其进行编辑：

import { 
    Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[ctrl-click]',
})

export class CtrlClickDirective implements OnInit, OnDestroy {
    private unsubscribe: any;

    // tslint:disable-next-line:no-output-rename
    @Output('ctrl-click') ctrlClickEvent = new EventEmitter();

    constructor(private readonly renderer: Renderer2, private readonly element: ElementRef) {}

    ngOnInit() {
        this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'click', event => {
            if (event.ctrlKey) {
                event.preventDefault();
                event.stopPropagation();
                // unselect accidentally selected text (browser default behaviour)
                document.getSelection().removeAllRanges();

                this.ctrlClickEvent.emit(event);
            }
        });
    }

    ngOnDestroy() {
        if (!this.unsubscribe) {
            return;
        }
        this.unsubscribe();
    }
}

如果与“ spec.ts”文件有冲突，则可以注释其构造函数。

最后，如果尚未自动添加，则需要将其添加到 app.modules.ts 文件：

import { CtrlClickDirective } from './shared/directives/ctrl-click.directive';

@NgModule({
imports: [
    ...
    CtrlClickDirective
],

然后，您可以在html文件中使用它。

注意：您不能在同一元素上同时为（单击）和（ctrl单击）添加侦听器。（点击）事件每次都会触发。如果需要两个事件侦听器，则需要嵌套它们，如下所示：

<a (click)="this.openSomething(params...)" style="cursor: pointer">
    <span (ctrl-click)="this.openSomethingNewTab(params...)">New Tab</span>
</a>

这应该很好，希望对您有所帮助。

Angular Ctrl点击？

2 个答案: