angular

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

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

Answer 1

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

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

Answer 2

不要将 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）

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

angular - How to get a reference to each element generated by ngFor when it's created

ngfor

angular5