각도 Ctrl 클릭?

각도 Ctrl 클릭?

사용자가 클릭을 눌렀을 때 어떻게 잡을 수 있습니까?

다음을 사용하여 클릭 한 번으로 실행할 수 있습니다.

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

하지만 난 이런 게 필요해

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

그게 가능한가요?

HTML

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

JS

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

독자적인 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>

잘 될 거예요, 도움이 됐으면 좋겠네요.

언급URL : https://stackoverflow.com/questions/27178680/angular-ctrl-click