腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

在 Angular 中使用 ViewChild 訪問子組件、指令或 DOM 元素的操作方法

更新時間：2024年08月12日 09:53:12 作者：白如意i

這篇文章主要介紹了如何在 Angular 中使用 ViewChild 來訪問子組件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 來從父組件類中訪問指令、子組件和 DOM 元素,需要的朋友可以參考下

簡介

本文將向您介紹 Angular 的 ViewChild 裝飾器。

在某些情況下，您可能希望從父組件類中訪問指令、子組件或 DOM 元素。ViewChild 裝飾器返回與給定指令、組件或模板引用選擇器匹配的第一個元素。

先決條件

如果您想要跟隨本教程進行操作：

考慮安裝 @angular/cli。
使用 @angular/cli 創(chuàng)建一個新項目，以測試 ViewChild 在其中的功能。

本教程已經(jīng)驗證過可以在 @angular/core v13.0.2 和 @angular/cli v13.0.3 下使用。

使用 ViewChild 與指令

ViewChild 使得訪問指令成為可能。

假設(shè)您有一個 SharkDirective。該指令將查找具有屬性 appShark 的元素，并在元素的文本前面添加單詞 "Shark"。

理想情況下，您將使用 @angular/cli 來 generate 您的指令：

ng generate directive shark --skip-tests

此命令將創(chuàng)建一個 shark.directive.ts 文件，并將該指令添加到 app.module.ts：

import { SharkDirective } from './shark.directive';
...
@NgModule({
  declarations: [
    AppComponent,
    SharkDirective
  ],
  ...
})

然后，使用 ElementRef 和 Renderer2 來重寫文本。將 shark.directive.ts 的內(nèi)容替換為以下內(nèi)容：

import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';
@Directive(
  { selector: '[appShark]' }
)
export class SharkDirective {
  creature = 'Dolphin';
  constructor(elem: ElementRef, renderer: Renderer2) {
    let shark = renderer.createText('Shark ');
    renderer.appendChild(elem.nativeElement, shark);
  }
}

接下來，在組件模板中的一個包含文本的 span 中添加一個 appShark 屬性。將 app.component.html 的內(nèi)容替換為以下內(nèi)容：

<span appShark>Fin!</span>

在瀏覽器中查看應(yīng)用程序時，將在元素的內(nèi)容之前呈現(xiàn)單詞 "Shark"：

Shark Fin!

現(xiàn)在，您還可以訪問 SharkDirective 的 creature 實例變量，并使用其值設(shè)置一個 extraCreature 實例變量。將 app.component.ts 的內(nèi)容替換為以下內(nèi)容：

import {
  Component,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import { SharkDirective } from './shark.directive';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  extraCreature!: string;
  @ViewChild(SharkDirective)
  set appShark(directive: SharkDirective) {
    this.extraCreature = directive.creature;
  };
  ngAfterViewInit() {
    console.log(this.extraCreature); // Dolphin
  }
}

此代碼使用了一個 setter 來設(shè)置 extraCreature 變量。請注意，它等待 AfterViewInit 生命周期鉤子來訪問變量，因為這是子組件和指令可用的時候。

在瀏覽器中查看應(yīng)用程序時，您仍將看到 "Shark Fin!" 消息。但是，在控制臺日志中，它將顯示：

Dolphin

父組件能夠訪問指令的值。

使用 ViewChild 與 DOM 元素

ViewChild 使得訪問具有模板引用變量的本機 DOM 元素成為可能。

假設(shè)您在模板中有一個帶有 #someInput 引用變量的 <input>。將 app.component.html 的內(nèi)容替換為以下內(nèi)容：

<input #someInput placeholder="Your favorite sea creature">

現(xiàn)在，您可以使用 ViewChild 訪問 <input> 并設(shè)置 value。將 app.component.ts 的內(nèi)容替換為以下內(nèi)容：

import {
  Component,
  ViewChild,
  AfterViewInit,
  ElementRef
} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('someInput') someInput!: ElementRef;
  ngAfterViewInit() {
    this.someInput.nativeElement.value = 'Whale!';
  }
}

當 ngAfterViewInit 觸發(fā)時，<input> 的值將被設(shè)置為：

Whale!

父組件能夠設(shè)置子 DOM 元素的值。

使用 ViewChild 與子組件

ViewChild 使得訪問子組件并調(diào)用子組件可用的方法或訪問實例變量成為可能。

假設(shè)您有一個 PupComponent。

理想情況下，您將使用 @angular/cli 來 generate 您的組件：

ng generate component pup --flat --skip-tests

此命令將創(chuàng)建 pup.component.ts、pup.component.css 和 pup.component.html 文件。并將該組件添加到 app.module.ts：

import { PupComponent } from './pup.component';
...
@NgModule({
  declarations: [
    AppComponent,
    PupComponent
  ],
  ...
})

然后，在 PupComponent 中添加一個返回消息的 whoAmI 方法：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-pup',
  templateUrl: './pup.component.html',
  styleUrs: ['./pup/component.css']
})
export class PupComponent implements OnInit {
  constructor() { }
  whoAmI() {
    return 'I am a pup component!';
  }
  ngOnInit(): void {
  }
}

接下來，在應(yīng)用程序模板中引用子組件。將 app.component.html 的內(nèi)容替換為以下內(nèi)容：

<app-pup>pup works!</app-pup>

現(xiàn)在，您可以使用 ViewChild 在父組件類中調(diào)用 whoAmI 方法。將 app.component.ts 的內(nèi)容替換為以下內(nèi)容：

import {
  Component,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import { PupComponent } from './pup.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(PupComponent) pup!: PupComponent;
  ngAfterViewInit() {
    console.log(this.pup.whoAmI()); // I am a pup component!
  }
}

在瀏覽器中查看應(yīng)用程序時，控制臺日志將顯示：

I am a pup component!

父組件能夠調(diào)用子組件的 whoAmI 方法。

結(jié)論

在本教程中，您使用了 ViewChild 來從父組件類中訪問指令、子組件和 DOM 元素。

如果引用動態(tài)更改為新元素，ViewChild 將自動更新其引用。

在需要訪問多個子元素的情況下，您應(yīng)該使用 ViewChildren。

如果您想了解更多關(guān)于 Angular 的知識，請查看我們的 Angular 專題頁面，了解練習和編程項目。

到此這篇關(guān)于在 Angular 中使用 ViewChild 訪問子組件、指令或 DOM 元素的操作方法的文章就介紹到這了,更多相關(guān)Angular 使用 ViewChild 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: