什么是 angular 中的 viewchild ElementRef

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

参考是： 如何使用 Angular 在 vi​​s.js 中使网络可视化工作？

所以我很困惑什么是@ViewChild('network', {static: false}) el: ElementRef; 据我了解，viewchild 通常用于父组件调用子组件。 但在这个例子中，我试图运行代码，它在没有定义子组件的情况下工作。 那么这里的 ElementRef 是“孩子”吗？

Answer 1

ViewChild 此处允许您在同一组件中添加对 html 元素的引用在您的情况下，带有 #network 的 div 与 document.getElementById 类似，但它仅检测同一组件中的“子项”

Answer 2

ViewChild 常用于引用子组件。 它还可以用于引用模板中的 HTML 元素。 ElementRef 是 angular 包装 HTML 元素并以编程方式操作它们的一种方式。 在您的示例中， <div> 被分配了一个模板变量 #network，该变量用作选择器来捕获组件的 el 属性中的特定 <div>。 当您删除模板时，选择器不返回元素，因此 el 保持未定义。