Question

我正在尝试执行指令，以格式化输入数字=“ text”值以对数字进行分组，我具有用于分组的方法，但是在从指令访问值以及注册到按键时遇到困难指令中的事件。

我有以下内容：

<input type="text" class="form-control" [(ngModel)]="newNumberVal"                                                           
       placeholder="" name="newNumber" formControlName="newNumber" maxlength="20" groupingFormat>

import { Directive, OnInit, ElementRef } from '@angular/core';

declare var $: any;

@Directive({
  selector: '[groupingFormat]'
})
export class GroupingFormatDirective {

  private el: HTMLElement;

  constructor(elRef: ElementRef) {
    this.el = elRef.nativeElement;
  }

  ngAfterViewInit(): void {
    const element = this.el;    
    //how to access the input value from nativeElement and how to add event ?
  }



digitGrouping(digits) {
    //this method is able to change the digits value directly.
}

}

Answer 1

ElementRef是本机DOM元素上的Angular Wrapper。一旦可以访问elementRef，就可以访问DOM元素，并可以向其中添加EventListener。查看此stackBlitz演示以了解您要实现的https://stackblitz.com/edit/angular-directive-native-ref?file=src/app/new.directive.ts

如何在Angular 5中使用keypress事件定义输入文本的指令？

1 个答案: