Angular ViewChild 第二个参数 - TypeScript

在 Angular 中，ViewChild 用于在 component 中访问一个子组件或者 DOM 元素。通常情况下，我们会使用 ViewChild 并将其绑定到一个本地变量上，以便我们可以在组件中直接操作它。

而 ViewChild 的第二个参数则允许我们获取子组件或者 DOM 元素的类型。这个参数是一个对象，用来提供一个类型引用，以告诉 Angular 我们想要获取的元素是什么类型。

举个例子，如果我们需要获取一个子组件的实例，并在组件中进行一些操作，我们可以使用 ViewChild 并指定类型为该组件的类名。假设我们有一个子组件 MyChildComponent，我们可以这样使用 ViewChild：

import { ViewChild } from '@angular/core';
import { MyChildComponent } from './my-child.component';

@Component({
  selector: 'app-my-component',
  template: `
    <app-my-child></app-my-child>
  `
})
export class MyComponent {
  @ViewChild(MyChildComponent) childComponent: MyChildComponent;

  doSomething() {
    this.childComponent.doSomething();
  }
}

在上面的代码中，我们使用 ViewChild 并指定类型为 MyChildComponent，然后把获取到的子组件赋值给了一个本地变量 childComponent。接着，我们就可以在组件中通过 childComponent 对子组件进行操作了。

另一方面，如果我们要获取一个 DOM 元素，我们可以指定元素的类型为 ElementRef。假设我们有一个按钮元素，我们可以这样使用 ViewChild：

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

@Component({
  selector: 'app-my-component',
  template: `
    <button #myButton>Click me!</button>
  `
})
export class MyComponent {
  @ViewChild('myButton', { static: true, read: ElementRef }) myButton: ElementRef<HTMLButtonElement>;

  onClick() {
    this.myButton.nativeElement.click();
  }
}

在上面的代码中，我们使用 ViewChild，并指定元素的类型为 ElementRef，并且将其读取为 HTMLButtonElement，然后把获取到的元素赋值给了一个本地变量 myButton。接着，我们就可以在组件中通过 myButton 对按钮元素进行操作了。

值得注意的是，我们需要在 ViewChild 的参数中指定 static 属性为 true，以确保 ViewChild 可以正确的获取到元素，否则会引发运行时错误。

总结一下，ViewChild 的第二个参数可以用于指定子组件或者 DOM 元素的类型，以便我们可以在组件中直接操作它。对于子组件，我们可以指定其类名；对于 DOM 元素，我们可以指定其类型为 ElementRef 并将其读取为相应的 HTML 元素类型。