如何在 Angular 组件中创建 HtmlElement 引用？答案

【问题标题】：How do I create an HtmlElement Reference in an Angular component?如何在 Angular 组件中创建 HtmlElement 引用？
【发布时间】：2019-12-02 23:31:49
【问题描述】：

我有一个组件MyNodeComponent，它将target HTML 元素作为我Angular 7.2.15 中输入对象的一部分：

@Component({
  selector: 'my-node',
  templateUrl: './my-node.component.html'
})

export class MyNodeComponent implements OnInit, OnChanges, AfterViewInit {
  @Input() inputObject: [{target: HTMLElement, desc: string}];
  ...
}

问题是我不确定如何以动态方式将 HTML DOM 节点发送到目标。尤其是在具有不同层次关系的页面上可能有多个 MyNode 实例：

<body>
  <my-node [inputObject]="inputObjectDefinition"></my-node> <!-- target should refer to target1 -->

  <p id="target1" #target1>Hello</p>

  <div id="target2" #target2>
  </div> 
</body>

如何定义 inputObjectDefinition 以包含来自 typescript 组件内部对 target1 和 target2 的引用？我是否使用 document.getElementById （它一直返回 null 但我可能用错了）？其他方式？

回答强制性的“你为什么这样做？”问题实际上是 MyNodeComponent 用于将 dom 节点发送到 html2Canvas 库，以便我可以将页面的一部分或部分呈现到图像。

【问题讨论】：

标签： angular angular7 html2canvas

【解决方案1】：

看看 Angular 的 ElementRef (https://angular.io/api/core/ElementRef)。这使您可以访问 DOM 中的元素。

您可以在此处查看此操作； https://stackblitz.com/edit/angular-elementref-example

在你的情况下，你会；

@ViewChild("target1", {read: ElementRef, static: true}) target1ref: ElementRef; // gets #target1
@ViewChild("target2", {read: ElementRef, static: true}) target2ref: ElementRef; // gets #target2

ngAfterViewInit(): void {
    console.log(this.target1ref.nativeElement);
    console.log(this.target2ref.nativeElement);
}

如果你想动态选择这些，你可以通过使用 ViewChildren 引用指令来实现。

【讨论】：

静态不是 ViewChild 参数的属性。
@IcedDante 是的，官方文档在这里； angular.io/api/core/ViewChild 如果您没有使用最新的堆栈，您能否在您的帖子中包含特定的角度版本？干杯
对此感到抱歉。我是 7.x，我会将该信息添加到帖子中