如何让angular 7在点击按钮时自动对焦

在Angular 7中，可以通过使用Angular的内置指令和事件绑定来实现在点击按钮时自动对焦的功能。

首先，在HTML模板中，为按钮添加一个点击事件绑定，并使用Angular的内置指令autofocus来实现自动对焦。代码如下：

<button (click)="focusInput()" autofocus>点击按钮自动对焦</button>
<input #myInput type="text">

在上述代码中，我们为按钮添加了一个点击事件绑定(click)="focusInput()"，并在按钮上添加了autofocus指令。同时，我们还在输入框上添加了一个本地引用#myInput，用于在组件中获取输入框的引用。

接下来，在组件的 TypeScript 文件中，定义一个名为focusInput()的方法，并使用ViewChild装饰器获取输入框的引用，并调用其focus()方法实现自动对焦。代码如下：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('myInput', { static: false }) myInput: ElementRef;

  focusInput() {
    this.myInput.nativeElement.focus();
  }
}

在上述代码中，我们使用ViewChild装饰器来获取输入框的引用，并将其赋值给myInput属性。然后，在focusInput()方法中，我们通过nativeElement属性获取输入框的原生 DOM 元素，并调用其focus()方法实现自动对焦。

这样，当点击按钮时，输入框将自动获取焦点。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）。

腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供了高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器，并根据实际使用情况进行弹性调整。腾讯云云服务器支持多种操作系统和应用环境，适用于网站托管、应用程序部署、数据存储、游戏服务等各种场景。

了解更多关于腾讯云云服务器的信息，请访问：腾讯云云服务器产品介绍。