代码之家 › 专栏 › 技术社区 › Lia

输入内联编辑单击外部

typescript angular javascript

2

Lia · 技术社区 · 7 年前

我正试图以这种方式内联编辑输入,我编写了一个clickoutside指令,它可以正常工作,但在我的示例中,当我单击编辑时 editMode 变为真,立即显示输入,并且 clickOutside 触发并使 编辑模式 错误,因此这会导致我的编辑单击不起作用:

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

3 回复 | 直到 7 年前

1

4

Sivakumar Tadisetti zeah 7 年前

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

}

2

1

Wand Maker 7 年前

将代码更改为如下所示:

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

我们要补充的是 [delayClickOutsideInit]="true"

按照 ng-click-outside documentation 它

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

3

1

ConnorsFan 7 年前

你可以推迟 editMode ,以确保单击事件在显示输入元素之前完成:

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

使用方法:

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