javascript - 输入内联编辑 clickOutside

Question

我正在尝试以这种方式内联编辑输入，我写了一个 clickOutside 指令并且它工作正常但在我的示例中当我点击编辑时 editMode 变为 true 并立即显示输入并且 clickOutside 触发并使 editMode 为假，所以这导致我的编辑点击不起作用:

<span *ngIf="!editMode" (click)="edit(); editMode = true"></span>
<input *ngIf="editMode" (clickOutside)="save(); editMode = false">

我该如何解决这个问题？提前致谢。

我的clickOutside 指令:

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

Answer 1

HTML

<span *ngIf="!editMode" (click)="edit($event); editMode = true">Click to edit</span>
<input *ngIf="editMode" (clickOutside)="save(); editMode = false">

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  editMode = false;

  edit(event) {
    event.stopImmediatePropagation();
    console.log(this.editMode);
  }

  save() {
    console.log(this.editMode);
  }

}