@ViewChild ElementRef - Javascript

介绍

在使用Angular框架时，有时需要在组件中操作DOM元素，这时可以使用@ViewChild装饰器获取一个指向DOM元素的引用。@ViewChild装饰器是Angular提供的一种方式，用于获取对组件模板中DOM元素的引用。当需要在代码中操作模板中的DOM元素时，我们可以通过这种方式简单地获取DOM元素的引用。

语法

@ViewChild(selector: string | Function | Type<any>, options?: { read?: any; static?: boolean; }) propertyName: any;

参数

• selector：要检索的元素的选择器字符串、指令类型、组件类型。如果使用字符串选择器，则必须是相对于包含该视图的组件的本地名称。如果使用指令/组件类型，Angular会在组件的视图树中寻找第一个匹配项。
• options：一个可选参数对象，用于将DOM元素注入到组件时设置其他选项。常用的选项是read，用于指定注入器从何处读取元素。默认情况下，如果提供了它，那么是从元素注入器中读取元素，在模板中找到的第一个。

使用@ViewChild获取ElementRef的引用

示例代码如下：

<h1>Example Component</h1>
<div #myDiv>Some Content in div</div>

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

@Component({
  selector: 'example',
  template: `
    <h1>Example Component</h1>
    <div #myDiv>Some Content in div</div>
  `
})
export class ExampleComponent {
  @ViewChild('myDiv') myDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.myDiv.nativeElement.innerText);
  }
}

• 在组件模板中，我们定义了一个名称为myDiv的元素，并通过#符号来定义它。
• 在组件中，我们使用@ViewChild('myDiv')装饰器和myDiv属性来获取该元素的引用，并可以通过nativeElement属性访问该元素的实际DOM元素。
• 我们也可以在ngAfterViewInit钩子中访问该元素的文本内容，并在控制台中打印出来。

使用@ViewChild获取子组件的引用

有时我们需要在一个组件中访问另一个组件，例如，一个组件中有一个子组件，我们需要在父组件中使用子组件的方法或属性。

示例代码如下：

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from 'path/to/child-component';

@Component({
  selector: 'parent',
  template: `
    <h1>Parent Component</h1>
    <child-component></child-component>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    this.childComponent.childMethod(); // 调用子组件的某个方法
  }
}

• 我们可以使用@ViewChild装饰器来获取对子组件的引用，这里的ChildComponent是子组件的类名。
• 我们可以在ngAfterViewInit钩子中访问子组件，并调用它的方法或设置它的属性。

结论

@ViewChild是Angular中非常有用的一个装饰器，它让我们能够直接访问DOM元素或子组件。使用@ViewChild获取DOM元素的引用是非常为DOM操作提供了便利，而子组件的引用则允许我们直接调用子组件的方法或设置子组件的属性。