Cara Menggunakan ViewChild di Angular untuk Mengakses Komponen Anak, Arahan, atau Elemen DOM

Pengantar

Artikel ini akan memperkenalkan Anda dengan dekorator ViewChild dari Angular.

Mungkin ada kalanya Anda ingin mengakses arahan, komponen anak, atau elemen DOM dari kelas komponen induk. Dekorator ViewChild menghasilkan elemen pertama yang sesuai dengan suatu arahan, komponen, atau pemilih referensi templat yang ditentukan.

Menggunakan ViewChild dengan Arahan

ViewChild memungkinkan untuk mengakses arahan.

Umpamakan kita memiliki SharkDirective.

Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate arahan Anda:

ng generate directive shark

Cara lainnya, Anda mungkin perlu menambahkannya secara manual ke app.module.ts:

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

Arahan kita akan mencari elemen dengan atribut appShark dan mengawali teks di dalam elemen dengan kata Shark:

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);
  }
}

Selanjutnya, kita akan menambahkan Shark ke Fin dengan menggunakannya di dalam templat komponen:

<span appShark>Fin!</span>

Ketika melihat aplikasi di dalam peramban, akan muncul tampilan seperti:

Output
Shark Fin!

Sekarang, kita dapat mengakses variabel instans creature dari SharkDirective dan menetapkan variabel instans extraCreature dengan nilainya:

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
  }
}

Kita menggunakan penentu di sini untuk menentukan variabel extraCreature. Perhatikan bahwa kita menunggu kait siklus hidup AfterViewInit untuk mengakses variabel, karena ini saatnya komponen anak dan arahan menjadi tersedia.

Ketika melihat aplikasi di peramban, kita akan tetap melihat pesan "Shark Fin!". Namun, dalam log konsol, akan muncul tampilan:

Output
Dolphin

Komponen induk dapat mengakses nilai dari arahan.

Menggunakan ViewChild dengan Elemen DOM

ViewChild memungkinkan untuk mengakses elemen DOM asli yang memiliki variabel referensi templat.

Umpamakan kita memiliki <input> dalam templat dengan variabel referensi #someInput:

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

Sekarang, kita dapat mengakses <input> dengan ViewChild dan menetapkan value:

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!';
  }
}

Ketika ngAfterViewInit dijalankan, nilai <input> akan ditetapkan menjadi:

Output
Whale!

Komponen induk dapat mengatur nilai dari Element DOM anak.

Menggunakan ViewChild dengan Komponen Anak

ViewChild memungkinkan untuk mengakses komponen anak dan memanggil variabel instans akses atau metode yang tersedia bagi anak.

Umpamakan kita memiliki ChildComponent. Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate kompenen:

ng generate component child --flat

Cara lainnya, Anda mungkin perlu menciptakan berkas child.component.css dan child.component.html serta menambahkannya secara manual ke app.module.ts:

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

Kita akan menambahkan metode whoAmI ke ChildComponent yang menghasilkan pesan:

whoAmI() {
  return 'I am a child component!';
}

Selanjutnya, kita akan mereferensikan komponen di dalam templat aplikasi kita:

<app-child>child works!</app-child>

Sekarang, kita dapat memanggil metode whoAmI dari dalam kelas komponen induk dengan ViewChild seperti ini:

import {
  Component,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import { ChildComponent } from './child.component';

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

Ketika melihat aplikasi di peramban, log konsol akan menampilkan:

Output
I am a child component!

Komponen induk dapat memanggil metode whoAmI dari komponen anak.

Kesimpulan

Anda telah mempelajari cara menggunakan ViewChild untuk mengakses suatu arahan, komponen anak, dan elemen DOM dari kelas komponen induk.

Jika referensi berubah menjadi elemen baru secara dinamis, ViewChild akan secara otomatis memperbarui referensinya.

Dalam kasus saat Anda ingin mengakses beberapa anak, Anda akan menggunakan ViewChildren.

Jika Anda ingin mempelajari lebih lanjut tentang Angular, lihat halaman topik Angular kami untuk proyek latihan dan pemrograman.