当组件以角度加载时，如何选择输入字段的动态值

Question

不能在AfterViewInit挂钩上选择动态值。该值可能在角度生命周期的后期选择；它实际上与AfterViewChecked挂钩一起工作，但这将使我必须设置一个标志，以便它只在第一次运行。这似乎是一个过于复杂的解决方案。我还在生产中得到了一个ExpressionChangedAfterItHasBeenCheckedError，这是有道理的。

在没有这些生命周期错误的情况下加载组件时，在input中选择动态值的简单/正确方法是什么

查看此stackblitz以获取演示。

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

应用程序组件.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内部，我们可以设置焦点并进行选择。

试试这个：

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();
}
} 

示例