Question

我正在开发一个简单的Messenger。我想实现消息可见/不可见功能。我如何获取标记元素的位置，这些元素位于列表视图内部的环绕式布局中？

这是我用来呈现消息的代码。

<ListView (loaded)="testLoad($event)"
   #chatBox
   separatorColor="transparent"
   class="chat-box"
   [items]="messages"
  (loaded)="scrollChatToBottom()"
  row="0">
  <ng-template let-item="item">
  <StackLayout 
    class="bubble-container">
    <Label
        [text]="item.createdAt | timeAgo"
        class="message-date-{{bubbleClass(item)}} SourceSansPro- 
   LightItalic"></Label>
    <WrapLayout 
      [class]="bubbleClass(item)" orientation="horizontal">
      <!--<Image 
      [src]="item.sender.pictureUrl"
      [class]="bubbleClass(item) + '-picture'">e></Imag-->
      <TextView
        editable="false"
        class="message-content SourceSansPro-Regular"
        [text]="item.messageBody"></TextView> 

    </WrapLayout >

    </StackLayout>
   </ng-template>
 </ListView>

Answer 1

ListView的整个想法是根据需要重用View（模板），只有数据可能不同，但是在滚动时，相同的View实例将重用于不同的索引。

因此，通常，您应该通过数据来控制View。如果打算将已读消息显示为粗体/浅色或其他颜色，则可以通过CSS来完成，因此只需根据数据项中的已读/未读标志绑定正确的类即可。

如果您仍然想访问实际的View元素，则可以使用RadListView。我认为目前还没有一种简单的方法可以在ListView中访问View实例。

Answer 2

我不了解ListView，但是我一直都可以使用指令来获取ElementRef。如果您拥有ElementRef，则可以获取el.nativeElement.offsetTop。

所以，唯一使它像这样的东西：

@Directive({
  selector: '[pos]'
})
export class PosDirective  {
  @Input('pos') index:number;
  el:ElementRef
  constructor(el:ElementRef){ 
    this.el=el;
   }
}

我们的指令需要“索引”。我在<p>

中使用ngFor给出了一个简单示例

<p [pos]="i" *ngFor="let item of data;let i=index">{{item}}</p>
<button (click)="showPos(0)">click</button>

我们使用ViewChildren“获得p”（实际上是指令）

  @ViewChildren(PosDirective)positions:QueryList<PosDirective>;

  showPos(index:number)
  {
    const elem=(this.positions.toArray()[index]) as PosDirective;
    console.log(elem.el.nativeElement.offsetTop)
  }

请参见stackblitz

在列表视图中获取当前元素

2 个答案: