Table of Contents
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:
[label 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:
[label shark.directive.ts]
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:
[label app.component.html]
<span <^>appShark<^>>Fin!</span>
Ketika melihat aplikasi di dalam peramban, akan muncul tampilan seperti:
[secondary_label Output]
Shark Fin!
Sekarang, kita dapat mengakses variabel instans creature dari SharkDirective dan menetapkan variabel instans extraCreature dengan nilainya:
[label app.component.ts]
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:
[secondary_label 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:
[label app.component.html]
<input <^>#someInput<^> placeholder="Your favorite sea creature">
Sekarang, kita dapat mengakses <input> dengan ViewChild dan menetapkan value:
[label app.component.ts]
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:
[secondary_label 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:
[label app.module.ts]
<^>import { ChildComponent } from './child.component';<^>
...
@NgModule({
declarations: [
AppComponent,
<^>ChildComponent<^>
],
...
})
Kita akan menambahkan metode whoAmI ke ChildComponent yang menghasilkan pesan:
[label child.component.ts]
whoAmI() {
return 'I am a child component!';
}
Selanjutnya, kita akan mereferensikan komponen di dalam templat aplikasi kita:
[label app.component.html]
<app-child>child works!</app-child>
Sekarang, kita dapat memanggil metode whoAmI dari dalam kelas komponen induk dengan ViewChild seperti ini:
[label app.component.ts]
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:
[secondary_label 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.
