angular4 指令在 HTML SPAN 标记中不起作用

Question

我在 angular4 中编写了一个指令，该指令适用于输入字段。 当我在 SPAN 标签上应用它时，它不起作用。 我们可以在 SPAN TAG 上应用指令吗，或者有什么解决方法。

<span dirTemp>45789</span>

dirTemp 实际上将值更正为 45,789

import { Directive, HostListener, ElementRef, OnInit, AfterViewInit, AfterViewChecked, AfterContentChecked } from '@angular/core';
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[dirTemp ]',
})

export class FormatterDirective implements AfterViewChecked {
  private el: HTMLInputElement;

  constructor(
    private elementRef: ElementRef,
    private cPipe: MyPipe
  ) {
    this.el = this.elementRef.nativeElement;
  }

  // ngOnInit() {
  //  this.el.value = this.cPipe.transform(this.el.value);
  // }

  ngAfterViewChecked(): void {
    this.el.value = this.cPipe.parse(this.el.value);
    this.el.value = this.cPipe.transform(this.el.value);
  }

  @HostListener('focus', ['$event.target.value'])
  onFocus(value) {
    console.log('in formatter directive:', value);
    this.el.value = this.cPipe.parse(value);
  }

  @HostListener('focusout', ['$event.target.value'])
  onFocusout(value) {
    this.el.value = this.cPipe.transform(value);
  }

}

Answer 1

解决方法：span 没有value，但有innerText 或innerHTML。所以，在ngOnInit 你可以这样做：

 ngOnInit() {
    if(this.el.tagName.toUpperCase() !== 'INPUT') {
      //  Apply your tranform here:
      var originalValue =  this.el.innerText;
      this.el.innerText = this.cPipe.transform(originalValue);
    }
  }