Question

我有一个组件MyNodeComponent，它使用一个target HTML元素作为输入：

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

export class MyNodeComponent implements OnInit, OnChanges, AfterViewInit {
  @Input() target;

  ...
}

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

<body>
  <my-node target="???"></my-node> <!-- target should refer to target1 -->

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

  <div id="target2" #target2>
    Goodbye <my-node target="???"></my-node> <!-- target should refer to target 2 -->
  </div> 
</body>

我尝试将id名称（例如'target1'）放入target属性，但它只是显示为字符串。我看到的大多数建议都涉及使用@ViewChild，这似乎不适用于我的目的，因为它需要在应出现在HTML中的组件中使用显式名称。因为一个组件可能有多个实例，所以我不希望依赖于#id名称。

如何将HTML元素引用传递给Angular中的组件？

0 个答案: