Angular 如何使用Render2（角度）选择文本

我想创建一个指令，用于选择

在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

似乎已被弃用，取而代之的是

Renderer2

，它没有

invokeElementMethod

。通过四处搜索，我找到了如下解决方案：

1.

this.render2.selectRootElement（this.hostElement.nativeElement.focus（），它适用于焦点，但似乎不适用于
。选择（）

this.hostElement.nativeElement.select（）


解决方案

使用了下面@eliseo的帮助。但是我发现我必须在setTimeout内包装
.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();
    });
  }
}

阿尔贝托，如果我们做一个简单的指示

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

最后，如果我们想使用输入，使用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>


点击
我认为您可以简单地使用
this.hosteElement.nativeElement.select（）
@Eliseo，刚刚尝试过。（Chrome、Firefox或Safari）运气不佳：/我补充了我的评论，希望这对你有所帮助
@Directive({
 selector: '[selectText]',
})
export class SelectTextDirective {
  @Input()set selectText(value)
  {
      if (value)
        this.hostElement.nativeElement.select();
  }
  constructor(private hostElement: ElementRef) {}
}

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