什么是视角的ElementRef？

Question

你好，我是AngularJs的新手，最近我回顾了一些角码，我看到这样的：

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

参考资料是：How to make Network visualization work in vis.js with Angular?

因此，我感到困惑的是什么是@ viewchild ('network'，{静态: false}) el: ElementRef;作为我的理解，viewchild通常用于父组件来调用子组件。但是在本例中，我尝试运行代码，它不使用定义的子组件。那么，这里的ElementRef是“孩子”？

Answer 1

这里的ViewChild允许您在同一个组件中添加一个对html元素的引用(在您的例子中是div和#network，它类似于document.getElementById，但它只检测到同一组件中的“子”)。

Answer 2

ViewChild经常用于引用子组件。它还可以用于引用模板中的HTML元素。ElementRef是一种以角度包装HTML元素并以编程方式操作它们的方法。在您的示例中，is为模板变量#network分配了一个模板变量，它用作选择器来捕获组件的el属性中的特定内容。删除模板时，选择器不返回任何元素，因此el仍未定义。