如何在 angular 中加载组件时 select 输入字段的动态值？

Question

无法在 AfterViewInit 挂钩上 select 编辑动态值。该值可能会在 angulars 生命周期的后期 selected；它实际上与 AfterViewChecked 挂钩一起使用，但这将迫使我设置一个标志，以便它仅在第一次运行时运行。这似乎是一个过于复杂的解决方案。我在生产中也得到了 ExpressionChangedAfterItHasBeenCheckedError，这是有道理的。

在没有这些生命周期错误的情况下加载组件时，simple/proper select 动态值的 input 方法是什么？

查看此 stackblitz 以获得演示。

这是我使用 AfterViewChecked 钩子的一些代码。

app.component.ts

import { Component, ViewChild, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewChecked {
  @ViewChild('myInput') public myInput;
  public value = 1;
  ngAfterViewChecked() {
    this.myInput.nativeElement.focus();
    this.myInput.nativeElement.select();
  }
}

app.component.html

<mat-form-field class='amount' appearance="standard">
    <mat-label>Convert</mat-label>
    <input #myInput matInput [(ngModel)]='value' />
</mat-form-field>

编辑：我添加了 mat-form-field 代码，因为它可能是相关的。

Answer 1

创建指令，以便我们可以通过注入 NgControl 来访问 ngModel 实例。然后在 valueChanges 中我们可以设置焦点和 select.

试试这个：

import { Directive, AfterViewInit,OnInit, ElementRef,OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms';
import {take,} from 'rxjs/operators';
import {Subscription} from 'rxjs';

@Directive({
  selector: '[appFocus]'
})
export class FocusDirective implements OnInit, OnDestroy {
  subscription = new Subscription();
  constructor(private elem: ElementRef, private ngControl:NgControl) { }

  ngOnInit(){
    this.subscription.add(this.ngControl.control!.valueChanges.pipe(take(1)).subscribe(v=>{
      console.log(v);
      this.elem.nativeElement.focus();  
      this.elem.nativeElement.select(); 
    }));  
  } 

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Example

如何在 angular 中加载组件时 select 输入字段的动态值？

How to select a dynamic value of an input field when a component is loaded in angular?

angular

angular-material

mat-form-field