Angular Ctrl点击？

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 键单击）的侦听器。(click) 事件每次都会触发。如果您需要两个事件侦听器，那么您需要嵌套它们，如下所示：

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

这应该可以正常工作，我希望对你有帮助。