Что такое Viewchild ElementRef в angular

Question

Привет, я новичок в AngularJs, недавно мы рассмотрели некоторые angular коды, я видел это так:

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet } from 'vis';

@Component({
  selector: 'app-test',
  template: '<div #network></div>'
})
export class TestComponent implements AfterViewInit {
  @ViewChild('network', {static: false}) el: ElementRef;
  private networkInstance: any;

  ngAfterViewInit() {
     const container = this.el.nativeElement;
     const nodes = new DataSet<any>([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    const edges = new DataSet<any>([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);
    const data = { nodes, edges };

    this.networkInstance = new Network(container, data, {});
  }
}

ссылка: Как сделать сеть работа визуализации в vis. js с Angular?

Так что я запутался, что такое @ ViewChild ('network', {stati c: false}) el: ElementRef ; Насколько я понимаю, viewchild обычно используется для родительского компонента для вызова дочерних компонентов. но в этом примере я попытался запустить код, он работает без определения дочернего компонента. Так что же здесь ElementRef является «ребенком»?

Answer 1

ViewChild здесь позволяет вам добавить ссылку на элемент html в том же компоненте. В вашем случае div с #network Это похоже на document.getElementById за исключением того, что он обнаруживает только «потомок» в том же компоненте

Answer 2

ViewChild часто используется для ссылки на дочерние компоненты. Его также можно использовать для ссылки на HTML Элементы в вашем шаблоне. ElementRef - это способ angular обернуть HTML элементы и управлять ими программно. В вашем примере

назначена переменная шаблона #network, которая используется в качестве селектора для захвата этого конкретного

в свойстве el компонента. Когда вы удаляете шаблон, селектор не возвращает никаких элементов, и, следовательно, el остается неопределенным.