Angular：给ControlValueAccessor组件应用指令获取input选中位置

问题核心在于你的指令直接操作的是自定义input-field组件的宿主元素，而非其内部的原生<input>元素，所以通过ElementRef无法拿到selectionStart和selectionEnd——这两个属性只有原生输入元素才具备。要实现需求，需要让自定义组件主动暴露内部原生输入框的引用或相关信息，以下是两种可靠的实现方式：

方式一：组件暴露获取选区的公共方法 #

1. 修改input-field组件，添加获取选区的方法 #

在你的自定义输入组件中，通过ViewChild拿到内部原生<input>的引用，然后提供一个公共方法返回选区信息：

import { Component, ViewChild, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'input-field',
  template: `<input #nativeInput type="text" [value]="innerValue" (input)="handleInput($event)">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputFieldComponent),
      multi: true
    }
  ]
})
export class InputFieldComponent implements ControlValueAccessor {
  @ViewChild('nativeInput') private nativeInput!: ElementRef<HTMLInputElement>;
  private innerValue = '';

  // ControlValueAccessor 基础实现
  onChange = (value: string) => {};
  onTouched = () => {};

  writeValue(value: string): void {
    this.innerValue = value || '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  handleInput(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    this.innerValue = value;
    this.onChange(value);
  }

  // 暴露给指令的公共方法：获取当前选区
  getCurrentSelection(): { start: number | null, end: number | null } {
    const inputEl = this.nativeInput.nativeElement;
    return {
      start: inputEl.selectionStart,
      end: inputEl.selectionEnd
    };
  }
}

2. 在自定义指令中注入组件实例并调用方法 #

在inputBehavior指令中，通过依赖注入获取input-field组件的实例，在键盘事件触发时调用组件的公共方法获取选区：

import { Directive, HostListener, Optional } from '@angular/core';
import { InputFieldComponent } from './input-field.component';

@Directive({
  selector: '[inputBehavior]'
})
export class InputBehaviorDirective {
  constructor(
    // 用@Optional()避免指令应用到非input-field组件时报错
    @Optional() private inputFieldComp: InputFieldComponent
  ) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if (!this.inputFieldComp) return;

    const selection = this.inputFieldComp.getCurrentSelection();
    // 这里处理你的业务逻辑
    console.log('选区起始位置:', selection.start);
    console.log('选区结束位置:', selection.end);
  }
}

方式二：组件通过输出事件主动传递选区变化 #

如果希望组件和指令更低耦合，可以让组件监听内部输入框的selectionchange事件，主动向外发射选区信息：

1. 修改input-field组件，添加输出事件 #

import { Component, ViewChild, ElementRef, forwardRef, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'input-field',
  template: `<input #nativeInput type="text" [value]="innerValue" (input)="handleInput($event)">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputFieldComponent),
      multi: true
    }
  ]
})
export class InputFieldComponent implements ControlValueAccessor, AfterViewInit {
  @ViewChild('nativeInput') private nativeInput!: ElementRef<HTMLInputElement>;
  @Output() selectionUpdated = new EventEmitter<{ start: number | null, end: number | null }>();
  private innerValue = '';

  // ControlValueAccessor 基础实现（同方式一）
  onChange = (value: string) => {};
  onTouched = () => {};

  writeValue(value: string): void { /* ... */ }
  registerOnChange(fn: any): void { /* ... */ }
  registerOnTouched(fn: any): void { /* ... */ }
  handleInput(event: Event): void { /* ... */ }

  ngAfterViewInit(): void {
    // 监听内部输入框的选区变化事件
    this.nativeInput.nativeElement.addEventListener('selectionchange', () => {
      this.selectionUpdated.emit({
        start: this.nativeInput.nativeElement.selectionStart,
        end: this.nativeInput.nativeElement.selectionEnd
      });
    });
  }
}

2. 在指令中监听组件的输出事件 #

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

@Directive({
  selector: '[inputBehavior]'
})
export class InputBehaviorDirective {
  @HostListener('selectionUpdated', ['$event'])
  onSelectionUpdated(selection: { start: number | null, end: number | null }): void {
    // 处理选区信息
    console.log('更新后的选区:', selection);
  }

  // 若需在keydown时执行额外逻辑，可保留该监听
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    // 键盘事件相关逻辑
  }
}

最终使用方式 #

将指令直接应用在自定义input-field组件上即可：

<input-field inputBehavior></input-field>

内容的提问来源于stack exchange，提问作者Arto Avag