Angular 2: 运行用户在可编辑字段内单击时的函数

Question

我已经为 contenteditable 字段创建了一个指令。我想运行一个功能，当用户点击一个可编辑的字段时，该字段是焦点，而不是运行其他功能，一旦用户点击离开该字段，这意味着它没有焦点。

我不清楚模糊与对焦的区别。（模糊）仅在用户点击 contenteditable 字段后才对我有用。如果我启用 (blur) 和 (focus) 它们会发生冲突并且 (blur) 不起作用。

有什么建议吗？

import {
    Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core";


@Directive({
    selector: '[contenteditableModel]',
    host: {
      '(blur)': 'onEdit()',
       // '(focus)': 'onFocus()'
        //,
       // '(keyup)': 'onEdit()'
    }
})

export class ContentEditableDirective implements OnChanges {
    @Input('contenteditableModel') model: any;
    @Output('contenteditableModelChange') update = new EventEmitter();


    constructor(
        private elementRef: ElementRef
    ) {}


     onFocus(){
       // run when user clicked in the editable field.
    }


    ngOnChanges(changes) {
        console.log('ContentEditableDirective.ngOnChanges', changes);
       // console.log(changes);
       if (changes.model.isFirstChange())  this.refreshView();
    }

    onEdit() {
        // run an update when user clicked outside the editable field and it is not on focus.
        this.update.emit(value)
    }

    private refreshView() {
      this.elementRef.nativeElement.innerHTML = this.model
    }



}

App.ts

HTML

<div  class="line-breaker"
    contenteditable='true'
(contenteditableModelChange)="updatedinnerHtml($event)"
[contenteditableModel]="paragraphText"
></div>

TS

constructor(){


        this.paragraphText  = 'dddddd';
    }

Answer 1

这应该可以解决问题：

import {
    Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core";


@Directive({
    selector: '[contenteditableModel]'      
})

export class ContentEditableDirective implements OnChanges {
    @Input('contenteditableModel') model: any;
    @Output('contenteditableModelChange') update = new EventEmitter();


    constructor(
        private elementRef: ElementRef
    ) {}


@HostListener('focus', ['$event'])
onFocus(e) {
  // run when user clicked in the editable field / is focus.
}

   @HostListener('blur', ['$event'])
    onBlur(e) {
      // run when user clicked outside the field.
    }


    ngOnChanges(changes) {
        console.log('ContentEditableDirective.ngOnChanges', changes);
       // console.log(changes);
       if (changes.model.isFirstChange())  this.refreshView();
    }

    onEdit() {
        // run an update when user clicked outside the editable field and it is not on focus.
        this.update.emit(value)
    }

    private refreshView() {
      this.elementRef.nativeElement.innerHTML = this.model
    }



}

Angular 2: 运行用户在可编辑字段内单击时的函数

Angular 2: run a function when user clicked inside an editable field

angular

focus

directive

blur

Angular 2: 运行 用户在可编辑字段内单击时的函数

Angular 2: run a function when user clicked inside an editable field

angular

focus

directive

blur

Angular 2: 运行用户在可编辑字段内单击时的函数