Angular 每个项目在列表视图中的多个本地引用

Question

我正在为我的项目使用 nativescript-angular。 Here 有缩放的实现。它使用本地引用 (#item) 和 @ViewChild 修饰来访问元素：

<GridLayout (pan)="onPan($event)" (pinch)="onPinch($event)" (doubleTap)="onDoubleTap($event)" class="page">
<StackLayout #item width="200" height="200" backgroundColor="Green">
    <Image src="res://icon" width="50" height="50" class="p-20"></Image>        
    <!-- all children ot the element #item will scale accordingly-->
</StackLayout>
<TextView #status row="1" editable="false"></TextView>

并且在组件中：

@ViewChild("item") angularItem: ElementRef;

它工作正常。但我想在 ListView 中使用它。我的列表视图是这样的：

<ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <Label [text]="item.name" class="list-group-item"></Label>
    </ng-template>
</ListView>

如何为能够缩放每个元素的每个项目定义本地引用？

Answer 1

您可以使用 args.object 从传递给事件的参数中获取对象引用。

在你的情况下是这样的。

<ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <Label (pan)="onPan($event)" [text]="item.name" class="list-group-item"></Label>
    </ng-template>
</ListView>

并且您可以使用 $event.object

在 onPan 函数中获取 Label 引用

onPan(args){
  let label=<Label>args.object;
}

Angular 每个项目在列表视图中的多个本地引用

Angular multiple local reference in a list view for each item

nativescript

angular2-nativescript

angular