如何使用 Render2 select 文本 (Angular)

Question

我想创建一个指令来选择 <input>

中的整个文本

在旧版本 Angular 之前，我做了以下操作：

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

@Directive({
 selector: '[appSelectText]',
})
export class SelectTextDirective implements OnInit {
    @Input('appSelectText') selectText: boolean;

    constructor(private hostElement: ElementRef, private renderer: Renderer) {}

    ngOnInit() {
        if (this.selectText) {
            this.renderer.invokeElementMethod(this.hostElement.nativeElement, 'select');
        }
    }
}

不幸的是，Renderer 似乎已被弃用，取而代之的是没有 invokeElementMethod 的 Renderer2。四处搜索，我找到了解决方案，例如：

1.this.renderer2.selectRootElement(this.hostElement.nativeElement).focus();，它适用于焦点，但似乎不适用于 .select()

this.hostElement.nativeElement.select();

解决方案

在下方使用了@eliseo 的帮助。但我发现我必须将 .select() 包装在 setTimeout 中，我最好的猜测是它触发得太早了。以下效果非常好。

@Directive({
  selector: '[appSelectText]',
})
export class SelectTextDirective {
  constructor(private hostElement: ElementRef) {}

  @HostListener('focus', [])
  onFocus() {
    // SetTimeout (without time parameter) helps make sure this runs when it's supposed to 
setTimeout(() => {
      this.hostElement.nativeElement.select();
    });
  }
}

Answer 1

Alberto，如果我们做一个像

这样的简单指令

@Directive({
 selector: '[selectText]',
})
export class SelectTextDirective implements OnInit {
    @Input('selectText') selectText: any;

    constructor(private hostElement: ElementRef) {}

    ngOnInit() {
            this.hostElement.nativeElement.select();
    }
}

如果我们有输入

<input selectText value="hello word">

我们的输入变成了 selected。但是，只有当我们希望在应用程序的第一个状态下输入变为 selected 或者如果我们在 div 中输入带有 *ngIf 的输入变为真时，这才有意义，有些像

<input *ngIf="value" selectText value="hello word" >
<button (click)="value=!value">click</button>

如果我们想要聚焦 select 文本，这是可能的。为了这。我们可以使用 @HostListener

@Directive({
 selector: '[selectText]',
})
  export class SelectTextDirective {
  @HostListener('focus', [])
  onFocus() {
        this.hostElement.nativeElement.select();
  }

  constructor(private hostElement: ElementRef) {}
}

最后，如果我们想使用输入，使用 setter，而不是 ngOnInit

@Directive({
 selector: '[selectText]',
})
export class SelectTextDirective {
  @Input()set selectText(value)
  {
      if (value)
        this.hostElement.nativeElement.select();
  }
  constructor(private hostElement: ElementRef) {}
}

并且有一个输入和一个按钮，看到我们需要将值设置为 false

<input [selectText]="value" value="hello word" (blur)="value=false">
<button (click)="value=true">click</button>

如何使用 Render2 select 文本 (Angular)

How to select Text using Render2 ( Angular )

typescript

angular

angular9