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

试试这个？ 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

不要在Angular中使用JQuery。你不应该自己触摸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生成的每个元素的引用

2 个答案: