输入内联编辑clickOutside

Question

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

<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">

打字稿

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);
  }

}

Answer 2

将代码更改为如下所示：

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

在这里，我们添加[delayClickOutsideInit]="true"

根据ng-click-outside文档 ，它

延迟单击外部处理程序的初始化。 这可能对有条件显示的项目有所帮助

Answer 3

您可以延迟editMode的设置，以确保在显示输入元素之前完成click事件：

<span *ngIf="!editMode" (click)="setEditMode()"></span>

用的方法：

public setEditMode(): void {
  setTimeout(() => {
    this.edit();
    this.editMode = true;
  }, 50);
}