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

Question

我有一个组件 MyNodeComponent，它将 target HTML 元素作为 input 对象的一部分 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 但我可能用错了）？其他方式？

为了回答强制性的 "why are you doing this?" 问题，实际上 MyNodeComponent 用于将 dom 节点发送到 html2Canvas 库，以便我可以将页面的一部分或多个部分呈现为图像。

Answer 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);
}

如果您想 select 这些动态，您可以通过引用指令来实现，例如使用 ViewChildren 代替。

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

How do I create an HtmlElement Reference in an Angular component?

html2canvas

angular

angular7