Question

我试图将重点放在表演上

<div>
  <div style="height: 50px; width: 100%" (click)="inEdit=true">
    <div *ngIf="!inEdit">
      bla
    </div>
    <mat-form-field *ngIf="inEdit">
      <input (blur)="inEdit=false" 
      autofocus matInput >
    </mat-form-field>
  </div>
</div>

仅在首次点击时有效。

this guide

Answer 1

You can programmatically call a focus method of HTML element whenever you need!

Try this:

Template:

<div>
   <button mat-raised-button color="primary" (click)="inEdit=true;focus()">Edit</button>
  <div style="height: 50px; width: 100%" (click)="inEdit=true">
    <mat-form-field *ngIf="inEdit">
      <input #ref matInput >    
    </mat-form-field>
  </div>
</div>

TS:

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


@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {

  @ViewChild("ref",null) refField: ElementRef;

  focus(): void {
    setTimeout(() => {
      this.refField.nativeElement.focus();
    }, 100);
  }
}

Answer 2

我们可以使用@ViewChild装饰器（它来自angular核心）在Angular中实现所有与DOM相关的操作。

相关模板

HTML：

<input type="text" #inputName>

组件：

import { Component,AfterViewInit,ViewChild ElementRef} from '@angular/core';
... 

@ViewChild('inputName') inputEl:ElementRef;

ngAfterViewInit() {
      setTimeout(() => this.inputEl.nativeElement.focus());
}

使用此ElementRef，我们可以进行动态DOM（组件）渲染。

Note:

在使用ElememntRef之前，请确保所有DOM都在本地浏览器中呈现

移除并再次添加到dom后，自动对焦无法正常工作

2 个答案: