angular - 如何在创建时获取对 ngFor 生成的每个元素的引用

Question

在由 ngFor 生成之后，我正在尝试在我的元素上绑定 jQuery UI 功能。因此，我正在寻找的是一个事件或我可以在我的组件中使用的东西，它提供了对创建的新元素的引用。 类似的东西：

sample.component.html

<!-- Parent div is the element I want a reference to each time it's created
     so I can automatically bind the functionality -->

<div *ngFor="let item of items"> 
    <img src="whatever.jpg">
    <p> some other stuff here </p>
<div>

sample.component.ts

/* Something like Angular lifecycle hooks */

onNewElement(el) {
   $(el).draggable();
}

是否有某种我可以使用的回调或在生成每个元素后触发的角度方法？有机会提供样品吗？

Answer 1

不要将 JQuery 与 Angular 一起使用。你不应该自己去碰 DOM，你应该让 Angular 去做。

<div *ngFor="let item of items" #elements> 
    <img src="whatever.jpg">
    <p> some other stuff here </p>
<div>

在你的 TS 中：

@ViewChildren('elements') els: QueryList<any>;

通过这个元素列表，您可以获得任何元素的引用。

例如，获得第一个：

const first = this.els.first;

这将为您提供可以使用渲染器操作的元素：

constructor(private renderer: Renderer2) {}

（请注意，您需要加载视图才能访问子视图，这意味着最后一个可用的钩子是AfterViewInit）

Answer 2

试试这个？ span 不会产生任何 CSS 问题。

   <div *ngFor="let item of items"> 
      <span class="draggable">
        <img src="whatever.jpg">
        <p> some other stuff here </p>
      </span>
    <div>