One place for hosting & domains

      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:

      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:

      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:

      app.component.html

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

      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:

      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:

      app.component.html

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

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

      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:

      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:

      app.module.ts

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

      Kita akan menambahkan metode whoAmI ke ChildComponent yang menghasilkan pesan:

      child.component.ts

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

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

      app.component.html

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

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

      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:

      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.



      Source link

      What is the DOM?


      The Document Object Model, usually shortened to the DOM, is a cross-platform, language-independent application programming interface for HTML and XML documents.

      Frequently used by web browsers to parse and display website content, the DOM treats an HTML, XHTML, or XML document as a tree structure, where each node is an object representing a part of the document that can be manipulated programmatically. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.

      To learn more about the Document Object Model (DOM), visit our Introduction to the DOM tutorial.



      Source link

      Cómo usar ViewChild en Angular para acceder a una directiva, un componente secundario o un elemento DOM


      Introducción

      Este artículo le introducirá el decorador ViewChild de Angular.

      Es posible que existan situaciones en las que desee acceder a una directiva, componente secundario o elemento DOM de una clase principal de componentes. El decorador ViewChild devuelve el primer elemento que coincide con una directiva, un componente o un selector de referencia de plantillas concreto.

      Uso de ViewChild con Directivas

      ViewChild hace que sea posible acceder a directivas.

      Digamos que tenemos una SharkDirective.

      Idealmente, usará @angular/cli para generar (generate) su directiva:

      • ng generate directive shark

      De lo contrario, es posible que necesite añadirlo manualmente a app.module.ts:

      app.module.ts

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

      Nuestra directiva buscará elementos con el atributo appShark y preparará el texto en el elemento con la palabra Shark:

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

      A continuación, añadiremos un Shark a Fin usándolo en la plantilla del componente:

      app.component.html

      <span appShark>Fin!</span>
      

      Cuando visualice la aplicación en un navegador, se mostrará como:

      Output

      Shark Fin!

      Ahora, podemos acceder a la variable de la instancia creature de SharkDirective y estableceremos una variable de instancia extraCreature con su valor:

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

      Usamos un regulador aquí para establecer la variable extraCreature. Observe que esperamos que el enlace de ciclo de vida AfterViewInit acceda a nuestra variable, ya que es aquí cuando los componentes y directivas secundarios están disponibles.

      Cuando se visualice la aplicación en un navegador, veremos el mensaje "Shark Fin!" (¡funcionó!). Sin embargo, en el registro de la consola, se mostrará lo siguiente:

      Output

      Dolphin

      El componente principal pudo acceder al valor de la directiva.

      Uso de ViewChild con elementos DOM

      ViewChild permite acceder a elementos DOM nativos que tienen una variable de referencia de plantilla.

      Digamos que tenemos un <input> en nuestra plantilla con la variable de referencia #someInput:

      app.component.html

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

      Ahora podemos acceder a <input> con ViewChild y establecer el valor:

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

      Cuando ngAfterViewInit active el valor de nuestro <input> se establecerá a:

      Output

      Whale!

      El componente principal pudo establecer el valor del elemento DOM secundario.

      Usar ViewChild con componentes secundarios

      ViewChild hace que sea posible acceder a un componente secundario y a métodos de invocación o variables de instancia de acceso que están disponibles para el secundario.

      Digamos que tenemos un ChildComponent. Idealmente, usará @angular/cli para generar (generate) su componente:

      • ng generate component child --flat

      Si no es así, es posible que deba crear los archivos child.component.css y child.component.html y añadirlos manualmente a app.modul.ts:

      app.module.ts

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

      Añadiremos un método whoAmI a ChildComponent, que devuelve un mensaje:

      child.component.ts

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

      A continuación, haremos referencia al componente en la plantilla de nuestra aplicación:

      app.component.html

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

      Ahora podemos invocar el método whoAmI desde nuestra clase principal de componentes con ViewChild

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

      Cuando se visualiza la aplicación en un navegador, el registro de la consola mostrará:

      Output

      I am a child component!

      El componente principal pudo invocar el método whoAmI del componente secundario.

      Conclusión

      Ha aprendido a usar ViewChild para acceder a una directiva, componente secundario y a un elemento DOM desde una clase principal de componentes.

      Si la referencia cambia a un nuevo elemento dinámicamente, ViewChild actualizará automáticamente su referencia.

      En los casos es los que desee acceder a múltiples secundarios, usará ViewChildren.

      Si desea obtener más información sobre Angular, consulte nuestra página sobre el tema Angular para ver ejercicios y proyectos de programación.



      Source link