*ngFor 如何与 Angular 2 中的模板变量一起工作？

Posted 2023-03-07

【中文标题】*ngFor 如何与 Angular 2 中的模板变量一起工作？

【英文标题】：How *ngFor works with template variables in angular 2?

【发布时间】：2017-08-02 00:31:24

【问题描述】：

主要组件：

html

<event-thumbnail *ngFor='let event1 of events' #thumbnail  [event2]="event1" (eventClick)='handleEventClicked($event)'>Hello</event-thumbnail>
<button class='btn btn-primary' (click)="thumbnail.alertFoo()">alert id</button>
<button class='btn btn-primary' (click)='thumbnail.handleClickMe()'>click me!</button>

事件-缩略图组件

  alertFoo()
    alert("id called");
  

  handleClickMe()
    this.eventClick.emit('foo');
    alert('click');
  

在上面的代码中，我无法在使用 *ngFor 时使用缩略图 -> 模板变量的按钮，即。不会通过缩略图调用 alertFoo 和 handleClickMe()。我也尝试将它包装在 div 中，但它仍然不起作用。它仅在我使用 *ngFor 将整个代码包含在 div 中时才有效，即还有显示不需要的多个按钮的按钮。我想了解 ngFor 的工作原理是否有一些解决上述问题的方法，我希望重复事件但按钮只显示一次。

【问题讨论】：

这些方法到底是什么？前缀thumbnail 指的是什么？不太清楚，这就是我问的原因。您提供很少的代码来尝试解决此问题。最好是如果您可以在 plunker 中重现该问题... :)

@AJT_82 我认为上面的代码是自我解释的......如果你知道 angular2 #thumbnail 是模板变量，它指的是事件缩略图模板我试图调用 alertzfoo() 和 handleClickMe () 方法通过模板变量 thumbnail 存在于 event-thumbnail 组件中，当我将所有内容封装在一个 div 中时，该方法在上述代码中不起作用我看到我的页面中填充了多个按钮，因为它也成为 ngFor 的一部分。

不，代码不是不言自明的，但现在更清楚了，因为您提供了这些方法的位置，即在 event-thumbnail 组件中。

@AJT_82 好的，我想现在清楚多了....？

是的，所以我为你准备了一个答案:)

【参考方案1】：

为此目的使用ViewChild。这是一个例子。由于不确切知道您的组件是如何命名的，因此我在这里使用了虚拟名称。所以家长：

模板：

<button (click)="alertFooInChild()">Click</button>

TS：

@ViewChild(AppChild) appChild: AppChild;

alertFooInChild() 
  // call the method in the child
  this.appChild.alertFoo();

这是demo plunker :)

【讨论】：

这很好，感谢您的帮助......我还想知道 ViewChild 的范围仅适用于 parent 和 child 分支是否可以为 child 和 child 提供类似的功能。例如，我在 parent child1 和 child2 中有两个组件文件夹，我可以为 child1 和 child2 拥有相同的文件夹，因为上面的内容仅在我为 parent 和 child 执行时才有效。我正在使用 Angular CLI 自动生成组件。

不客气，很高兴我能帮上忙。是的，这个解决方案适用于父母和孩子。如果您需要其他组件通信，共享服务可能是要走的路:)