Как выбрать динамическое c значение поля ввода, когда компонент загружен в angular?

Question

Значение Dynami c не может быть выбрано для ловушки AfterViewInit. Значение может быть выбрано позже в жизненном цикле angulars; На самом деле он работает с ловушкой AfterViewChecked, но это обязывает меня установить флаг, чтобы он запускался только в первый раз. Это кажется слишком сложным решением. Я также получаю ExpressionChangedAfterItHasBeenCheckedError в процессе производства, что имеет смысл.

Какой простой / правильный способ выбрать значение Dynami c в 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

Создать директиву, чтобы мы могли получить доступ к экземпляру ngModel путем внедрения NgControl. Затем внутри 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();
  }
} 

Пример