Tekintse meg a gyermeket és a gyerekeket szögben

A Gyermek megtekintése és a Gyermekek megtekintése Angular dekoratőrök kerülnek megvitatásra, a gyakorlati megvalósítás az Angular használatával.

Áttekintés

• Ha olyan DOM-elemeket szeretnénk elérni, amelyek ugyanazon vagy gyermekkomponens HTML-sablonjában találhatók. Ebben az esetben használhatjuk a Gyermek megtekintése és a Gyermekek megtekintése dekorátorokat.
• Továbbá, ha hozzá akarunk férni a gyermekkomponens tulajdonságaihoz és metódusaihoz, ez lehetséges a Gyermek megtekintése és a Gyermekek megtekintése díszítőkkel.

Megvalósítás

Gyermekkomponens HTML-fájl

<div class="alert alert-secondary" role="alert" style="padding: 30px;margin: 40px;">
    <h3 #childheading>Child Component</h3>
</div>

• Itt, amint látjuk, van egy címsorelem és egy referenciaváltozónk hash-sel és névvel, mint gyermekfejléc.
• Tegyük fel, hogy hozzá akarunk férni ehhez a címsor DOM-elemhez ahhoz, hogy a gyermekkomponens típusú szkriptfájlban a Gyermekdekorátor megtekintése funkciót használjuk, ahogy az alábbiakban bemutattam.

Gyermekkomponens TypeScript fájl

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  //View Child
  @ViewChild("childheading") childheading!: ElementRef;

  constructor(private renderer: Renderer2) {

  }

  ngOnInit(): void {

  }

  ngAfterViewInit(): void {
    console.log(this.childheading)

    //ViewChild
    this.renderer.setStyle(this.childheading.nativeElement, 'background-color', 'red');

  }
}

• 1. sor – Importálja a ViewChild-t, az ElementRef-et és a Renderer2-t az angular core könyvtárból.
• 10. sor – Hozzon létre ViewChild elemet, amely egy ElementRef típusú, és tegye idézőjelbe a referenciaváltozót a ViewChild belsejébe.
• 12. sor – Injektálja be a Renderer2-t a konstruktorba, amelyet a DOM elem tulajdonságainak megváltoztatására fogunk használni.
• Ezt követően használja az ngAfterViewInit szögletes életciklus-hook-ot, amellyel elérjük a HTML DOM elemet, amikor az meg lesz jelenítve és inicializálva.
• 21. sor – a konzol naplózza az utódfejlécet, hogy megtekinthesse az adott tulajdonság részleteit a böngésző vizsgálati szakaszában.

• Itt, a konzol szakaszon belül láthatjuk az ElementRef-et és a natív elemet, amikor az alkalmazásunkat futtatjuk, és számos tulajdonság érhető el és módosítható, ahogy az alábbiakban bemutattam.
• 24. sor – Állítson be különböző stílusokat egy natív elemhez olyan megjelenítők segítségével, mint a betűtípus, a háttérszín és még sok más.

Tegyük fel, hogy egy másik címsorhoz szeretnénk hozzáférni ugyanazzal a hivatkozási változóval, például egy gyermek címsorhoz, amely nem lehetséges a Gyermekek megtekintése funkcióval, ehhez a Gyermekek megtekintése funkciót kell használnunk, mert a Gyermekek megtekintése csak az első egyező DOM hivatkozási elemre mutat.

Kezdjük el a Gyermekek megtekintése megvalósítását

Gyermekkomponens HTML-fájl

<div class="alert alert-secondary" role="alert" style="padding: 30px;margin: 40px;">
    <h3 #childheading>Child Component</h3>
    <h3 #childheading> Demo </h3>
</div>

• Itt láthatjuk, hogy most két címsor van ugyanazzal a sablon referenciaváltozóval, és a Gyermekek megtekintése funkcióval mindegyikhez különböző tulajdonságokat fogunk beállítani.

Gyermekkomponens TypeScript fájl

import { Component, QueryList, Renderer2, ViewChildren } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  //View Children
  @ViewChildren("childheading") childheading!: QueryList<any>;

  constructor(private renderer: Renderer2) {

  }

  ngOnInit(): void {

  }

  ngAfterViewInit(): void {
    console.log(this.childheading)

    //ViewChildren
    this.renderer.setStyle(this.childheading.first.nativeElement, 'color', 'red');
    this.renderer.setStyle(this.childheading.last.nativeElement, 'color', 'blue');

  }
}

• 1. sor – Importálja a QueryList-et, a Renderer2-t és a ViewChildren-t az Angular core könyvtárból.
• 10. sor – Hozzon létre egy ViewChildren objektumot, amely egy QueryList‹any› típusú, és helyezzen bele egy sablon referenciaváltozót.
• 12. sor – Renderer2 beszúrása a konstruktorba
• 20. sor – Az ngAfterViewInit Angular lifecycle hook használata, amely az elemek inicializálásakor aktiválódik.
• 21. sor – A konzol naplózza a gyermek fejlécet, és ennek részleteit láthatjuk az alkalmazás futtatásakor.

Itt láthatja a lekérdezési listát két natív elemrészlettel, első és utolsó.

• 24:25 sor – Állítson be különböző stílusokat vagy bármit a tulajdonság alapján az első és az utolsó elemhez.

Ez a DOM-elemek ViewChild és View Children használatával való eléréséről szól.

Most a gyermekkomponens metódusát a szülőkomponensbe fogjuk elérni a Gyermekek megtekintése díszítő segítségével.

Gyermekkomponens HTML-fájl

<div class="alert alert-secondary" role="alert" style="padding: 30px;margin: 40px;">
    <h3>Child Component</h3>
    <h5>{{message}}</h5>
</div>

• Itt, amint látható, csak karakterlánc-interpolációt használunk, és megjelenítjük az üzenetet, amikor a metódus végrehajtódik.

Gyermekkomponens TypeScript fájl

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message : string = "";

  constructor() {

  }

  ngOnInit(): void {

  }

  //Child Method
  childMethod()
  {
    this.message = 'Hi, Parent Component Invoke Child Method...';
  }

}

• A gyermek komponensen belül deklarálunk egy üzenettulajdonságot és egy gyermek metódust, amelyek csak egy karakterlánc-üzenetet tettek a tulajdonságunkba, és most ezt a gyermek metódust fogjuk végrehajtani a szülőkomponensből.

Szülőkomponens TypeScript fájl

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'viewchildandchildrendemo';

  @ViewChild("childMethod") method! : ChildComponent

  parentFunction()
  {
    this.method.childMethod();
  }

}

• Itt csak létrehozunk egy View Child objektumot, amely egyfajta gyermekkomponens, és megadjuk a metódus nevét, amelyet el szeretnénk érni.
• Ezután hozzon létre egy szülőfüggvényt, és hívja meg benne a gyermekkomponens metódust.

Szülőkomponens HTML-fájl

<nav class="navbar navbar-light bg-light" style="padding: 30px;margin: 40px; justify-content:center">
  <span class="navbar-brand mb-0 h1">Angular Component Communication</span>
</nav>

<div class="alert alert-primary" role="alert" style="padding: 30px;margin: 40px;">
  <h3>Parent Component</h3>
  <button (click) = "parentFunction()">Call child component method</button>
</div>

<app-child #childMethod></app-child>

• A HTML-fájlon belül a gyermekkomponenst a szögkiválasztó és a gyermek metódus referenciaváltozója segítségével hívjuk meg.
• Ezenkívül hozzon létre egy gombot eseménykötéssel, és hívja meg a szülő függvényt, amely a gyermek metódusra mutat.

Tehát itt minden a Gyermekek megtekintése és a Gyermekek megtekintése.

GitHub Link

https://github.com/Jaydeep-007/ViewChildAndChildrenDemo

Kellemes kódolást!