Question

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

@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以包含来自打字稿组件内部对target1和target2的引用？我是否使用document.getElementById（它始终返回null，但可能使用了错误）？其他方式？

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

Answer 1

看看Angular的ElementRef（https://angular.io/api/core/ElementRef）。这使您可以访问DOM中的Element。

您可以在这里看到实际效果； 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引用某个指令来实现。

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

1 个答案: