0

所以首先有一点背景。我正在开发一个应用程序，它使用 agm 地图实时显示多个用户的位置。我最近一直致力于提高性能，因为可能有成千上万的用户，每个用户都代表一个地图标记或 dom 元素。我已将父组件和子组件更改为都使用 onpush 策略，子组件使用 ngFor 循环呈现地图标记，我还在此循环中添加了 trackBy。通过信号器接收位置更新，对象被正确更新，但即使在变化检测运行之后，标记位置也没有在地图上正确更新。

下面的两个组件是简化版本，以帮助识别问题。

首先是父地图组件

     @Component({
      selector: 'app-map',
      template: '<agm-map>
                    <app-map-markers #mapMarkers [users]="users"></app-map-markers>
                </agm-map>',
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class MapComponent implements OnInit, OnDestroy {
        users: MapUser[];

        private handleLocationUpdate(updatedUser: any) {
           const user = this.users.find(this.findIndexToUpdate, updatedUser.Id);

           if (user !== null && user !== undefined) {
              user.lat = updatedUser.Lat;
              user.lng = updatedUser.Lng;
              user.lastSeen = updatedUser.LastSeen;

              const userIndex = this.handledUsers.indexOf(user);
              this.handledUsers[userIndex] = user;
           }
        }

        findIndexToUpdate(newItem) {
           return newItem.id === this;
        }
    }

users 数组是通过订阅 http 服务来填充的，但我把它省略了，因为它工作正常。当接收到位置更新时，它由父级处理，我离开了函数来显示这一点，但通过订阅信号器服务再次调用该函数。

现在是地图标记组件。

 @Component({
  selector: 'app-map-markers',
  template: '<agm-marker *ngFor="let user of users; let i = index; trackBy: trackByUser"  [latitude]="user.lat" [longitude]="user.lng" [title]="user.firstName">
             </agm-marker>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapMarkersComponent {
    @Input() users: MapUser[];

    constructor() {}

    public trackByUser(indx: number, value: MapUser) {
        let identifier: string = indx.toString();

        if ('lat' in value && 'lng' in value) {
          identifier = identifier.concat(value.lastSeen.toString());
        }

        return identifier;
      }
}

我怀疑问题是由于 onpush 它没有检测到更改，但是出于性能原因 onpush 似乎是这种情况下的最佳策略。我只需要更新元素而不是重新绘制整个用户列表。但也许我让我的电线交叉，因为我对角度还是很陌生。感谢您的任何帮助或建议。

4

1 回答 1

1

尝试调用更改检测“markForCheck()”，这将使角度在下一个周期运行更改检测。

@Component({
  selector: 'app-map-markers',
  template: '<agm-marker *ngFor="let user of users; let i = index; trackBy: trackByUser"  [latitude]="user.lat" [longitude]="user.lng" [title]="user.firstName">
             </agm-marker>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapMarkersComponent {
    public users: MapUser[]
    @Input() 
    set users(values: any[]){
      this.users = values;
      this.cdr.markForCheck();
    }

    constructor(private cdr: changeDetectorRef) {}

    public trackByUser(indx: number, value: MapUser) {
        let identifier: string = indx.toString();

        if ('lat' in value && 'lng' in value) {
          identifier = identifier.concat(value.lastSeen.toString());
        }

        return identifier;
      }
}
于 2019-08-31T18:26:12.010 回答