如何使用 Render2 ( 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已被弃用，取而代之的是没有invokeElementMethodRenderer2。四处搜索，我找到了以下解决方案：

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

2. this.hostElement.nativeElement.select();

<小时 />

解决方案

在下面使用了@eliseo的帮助。但我发现我必须将.select()包装在设置超时内，我最好的猜测是它发射得太早了。下面的工作就像一个魅力。

@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

阿尔贝托，如果我们制定一个简单的指令，例如

@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">

我们的输入将被选中。但是，这只有在我们希望在应用程序的第一个状态中输入被选中，或者如果我们在带有 *ngif 的div 中有输入时，这才有意义，这变成 false，有些像

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

如果我们想要，在焦点上选择文本，它是可能的。为此。我们可以使用@HostListener

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

最后，如果我们想使用输入，请使用二传手，而不是 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>