Question

我正在尝试以这种方式内联编辑输入，我编写了clickOutside指令，它可以正常工作，但是在我的示例中，当我单击以编辑editMode变为true并立即显示输入并显示{{1} }触发并设置clickOutside为假，因此这导致我的编辑点击不起作用：

editMode

我该如何解决此问题？预先感谢。

我的 clickOutside指令：

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

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 documentation，

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

Answer 3

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

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

使用方法：

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

输入内联编辑clickOutside

3 个答案: