如何在不使用nativeElement的情况下自动聚焦angular 10中的窗体控件

在Angular 10中，如果不想使用nativeElement来实现自动聚焦窗体控件，可以使用Renderer2来实现。

Renderer2是Angular提供的一个服务，用于操作DOM元素。它可以帮助我们在不直接访问底层DOM的情况下，进行DOM操作。

以下是在不使用nativeElement的情况下自动聚焦Angular 10中的窗体控件的步骤：

首先，在组件的构造函数中注入Renderer2服务：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
}

在需要自动聚焦的窗体控件上，使用@ViewChild装饰器获取对应的元素引用：

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

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

  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
}

在ngAfterViewInit生命周期钩子函数中，使用Renderer2的selectRootElement方法和focus方法来实现自动聚焦：

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

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

  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }

  ngAfterViewInit() {
    const element = this.renderer.selectRootElement(this.inputElement.nativeElement);
    this.renderer.focus(element);
  }
}

在上述代码中，ngAfterViewInit生命周期钩子函数会在视图初始化完成后被调用。在该函数中，我们使用Renderer2的selectRootElement方法获取到元素的引用，并使用focus方法将焦点设置到该元素上。

请注意，@ViewChild装饰器中的inputElement参数需要与模板中对应元素的引用名保持一致。例如，如果你的模板中有一个<input>元素，并且使用#inputElement来定义引用，那么@ViewChild装饰器中的参数应为inputElement。

希望以上内容能够帮助到你！如果有任何疑问，请随时提问。