Javascript 输入内联编辑单击外部

我试图以这种方式内联编辑输入，我编写了一个clickOutside指令，它可以正常工作，但在我的示例中，当我单击编辑

editMode

时，输入立即显示，

clickOutside

触发并使

editMode

为假，因此这会导致我的编辑单击不起作用：

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

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

我的单击外部指令：

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

import{Directive，ElementRef，Output，EventEmitter，HostListener}来自“@angular/core”；
@指示({
选择器：“[单击外部]”
})
导出类ClickOutside指令{
构造函数（私有elementRef:elementRef）{
}
@输出（）
public clickOutside=new EventEmitter（）；
@HostListener（'文档：单击'，['$event'，'$event.target']））
public onClick（事件：MouseEvent，targetElement:HTMLElement）：void{
如果（！targetElement）{
返回；
}
const clickedInside=this.elementRef.nativeElement.contains（targetElement）；
如果（！clickedInside）{
点击outside.emit（事件）；
}
}
}

将代码更改为如下所示：

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

span

这里我们添加了

[delayClickOutsideInit]=“true”

根据,它

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

---

您可以延迟设置

editMode

，以确保在显示输入元素之前完成单击事件：

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

HTML

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

---

但是'delayClickOutsideInit'不是'input'的已知属性。请尝试[attr.delayClickOutsideInit]=“true”。我在stackblitz上测试了上面的代码片段-它似乎工作得很好。我尝试了ng click outside的4.0.0版本-您使用的是哪个版本？或者让我们知道你在使用哪个图书馆？（clickOutside）默认情况下在Angular中不可用-需要外部库或自己编写此类指令我不使用ng click outside，我编写了自己的clickOutside指令，更新了问题。哦-在这种情况下-您的代码可能无法处理该场景。可能是看代码的ng点击外面，并试图找出他们如何解决这个问题。是

（模糊）

不能帮助您而不是分开指令吗？只是想知道…为什么不将元素包装在一个

内联块
样式化的
div
，并将
（单击外部）
移动到包装器div？@Javascript\u Lover您可以解释更多吗？何时使用模糊？@user184994很好的解决方案我会尝试并通知您。@fatemefazli您必须停止事件冒泡，然后单击事件，它就会工作。。。我已经发布了答案，请检查一次。谢谢你，它可以工作，但不幸的是我不能使用setTimeout。为什么不仅仅是
stopPropagation
？@yurzui一切都很好：-）stopPropagation也可以工作。我保存event.stopImmediatePropagation
并没有什么特别的目的，但无论如何它们之间是有区别的。我在这里创建了
<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);
  }

}