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

输入内联编辑单击外部

typescript angular javascript

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 年前

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

}

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 它

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

ConnorsFan 7 年前

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

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

使用方法:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前