如何在 Angular 17 和 Angular Materials 中管理焦点和模糊

Question

1. 我想管理我的应用程序中的焦点。在登录中，我想要的是，在服务器返回结果“true”之后，重点关注字段“code”

  @ViewChild('telephone') telephone!:ElementRef<any>
  @ViewChild('code') code!:ElementRef<any>
...
if (response.body.result) {
          this.frm.controls['codeField'].enable();
          this.renderer.selectRootElement('#code').focus()
}

HTML:
<mat-form-field class="codeField" >
        <mat-label>Code</mat-label>
        <span matPrefix> &nbsp;</span>
        <input type="text" matInput placeholder="00-00" mask="00-00" formControlName="codeField"  id='code' >
    </mat-form-field>

我尝试过使用：

renderer.selectRootElement('#focus').focus()/click()
ElementRef.nativeElement.focus()/click()
MatInput.focus()/click()

2. 我想在我的应用程序中管理模糊。我想要的是，在用户选择后，“地址”和“房间”变得模糊。

@ViewChild('address') adressInput!: MatAutocomplete;
@ViewChild('room') roomInput!: MatAutocomplete;

TS:
address_is_selected(event: any) {
 this.address.blur()

HTML:
<mat-form-field layout-align='center center'>
                <input matInput placeholder="address" aria-label="address" [matAutocomplete]="address"
                        formControlName="adress" #addressInput/>
                    <mat-autocomplete #address="matAutocomplete" id="address" (optionSelected)="address_is_selected($event.option.value)">
                        <mat-option *ngFor="let addressof filteredaddress | async" [value]="address">
                            <span> {{ address}}</span>
                        </mat-option>
                    </mat-autocomplete>
            </mat-form-field>

我尝试了所有这些方法，但没有一个可以帮助我。

Answer 1

模板引用变量，用于获取ViewChild，但它不是html属性。在 .ts 中，您使用变量并获取 ElementRef。

elementRef.nativeElement 是 HTMLElement

所以你只需使用“javaScript”

   this.code.nativeElement.focus()