Просмотр дочерних элементов и просмотр дочерних элементов в Angular

Декораторы @ViewChild и @ViewChildren предоставляют способ доступа и управления элементами DOM, директивами и компонентами. Мы можем использовать эти декораторы для доступа к дочернему компоненту и его различным свойствам в родительском компоненте.

@ViewChild

@ViewChild используется для получения ссылки на элемент DOM, отображаемый внутри компонента angular. Он всегда возвращает первый соответствующий элемент из DOM.

В представлении, то есть в HTML-файле, мы можем определить ссылочную переменную шаблона, используя # (Hash). В приведенном ниже коде #firstName — это ссылочная переменная шаблона.

<h1 #firstName > View Child </h1>

мы можем использовать декоратор @viewchild() в файле компонента (.ts), как показано ниже:

@ViewChild('firstName') heading : ElementRef;

Пример —

      <div>
        <h1 #highlight>Lorem Ipsum</h1>
        <h3 #highlight>
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </h3>
      </div>

Здесь #highlight используется как ссылочная переменная шаблона на ‹h1› и ‹h3›.

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild('highlight')
  Marker!: ElementRef;

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void { }

    ngAfterViewInit() {
      this.Marker.nativeElement.style.color = 'Red'
    }
}

Здесь мы получаем доступ к локальной ссылке, т. е. меняем цвет заголовка на красный, обращаясь к его элементам из DOM. мы используем метод ловушки жизненного цикла ngAfterViewInit, который будет вызываться при инициализации элементов.

Здесь мы видим, что заголовок изменился на красный цвет. Но #highlight задается для двух заголовков, то есть ‹h1› и ‹h3›, но цвет первого заголовка изменился, потому что @ViewChild возвращает первый соответствующий элемент из DOM.

@ViewChildren

@ViewChildren предоставляют способ доступа и управления элементами DOM, директивами, компонентами списка элементов. Он возвращает список элементов из шаблона в компонент.

      <div>
        <h1 #highlight>Lorem Ipsum</h1>
        <h3 #highlight>
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
          consectetur, adipisci velit..."
        </h3>
      </div>

Здесь он применяет манипуляцию ко всем элементам, где используется #highlight. В приведенном выше коде мы используем #highlight для ‹h1› и ‹h3›. Итак, он изменил цвет для обоих заголовков.

import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChildren('highlight')
  Marker!: QueryList<any>;

  constructor(private router: Router, private route: ActivatedRoute) {
    
   }

  ngOnInit(): void { 
  }

    ngAfterViewInit() {
      this.Marker.forEach(marker =>{
        marker.nativeElement.style.color = 'Red'
      })
    }
}