Как использовать Angular ngAfterViewInit с BehaviorSubject и создавать экземпляры Bing Map - PullRequest
Новая
       10

Как использовать Angular ngAfterViewInit с BehaviorSubject и создавать экземпляры Bing Map

0 голосов
/ 08 января 2019

Stackblitz - пример полного кода

У меня есть служба Angular, которая доставляет координаты широты / долготы (BehaviorSubject asObservable), которая используется моим BingMapComponent для инициализации центрального вида карты (метод экземпляра setView). Я создаю экземпляр карты в ngAfterViewInit, а затем создаю подписку с начальным значением и устанавливаю представление в подписке.

Когда для свойства BehaviorSubject по умолчанию задано значение NULL, представление экземпляра карты устанавливается правильно, когда служба в конечном итоге возвращает начальные значения координат. Однако, когда я по умолчанию устанавливаю для объекта BehaviorSubject координаты широта / долгота, представление карты не получает эти координаты.

Как правильно работать с этими жизненными циклами? Желаемое поведение - установить для вида карты Bing значение по умолчанию, которое может предоставить BehaviorSubject. 

@Injectable()
export class SiteConditionsService {
  // _center = new BehaviorSubject<number[]>(null); // works
  _center = new BehaviorSubject<number[]>([41.49871231510167, -72.95581850473526]); // doesn't work

  center$ = this._center.asObservable();

  constructor() {
    this.getInitialCenter(0).subscribe(initialCenter => {
      this._center.next(initialCenter);
    })
  }

  getInitialCenter(reportId): Observable<number[]> {
    // would come from HTTP service
    const center = [41.49871231510167, -72.95581850473526];
    return from<number[]>([center]).pipe(delay(2000));
  }
}

и 

@Component({
  selector: 'bing-map',
  templateUrl: 'bing-map.component.html',
  styles: [``]
})
export class BingMapComponent implements AfterViewInit  {

  @ViewChild('streetsideMap') streetsideMapViewChild: ElementRef;

  streetsideMap: Microsoft.Maps.Map;

  constructor(private service: SiteConditionsService) {}

  ngAfterViewInit() {
    this.createStreetSideMap();

    this.service.center$.pipe(
      filter(coords => !!coords),
      take(1)
    ).subscribe(coords => {
      const [lat, lon] = coords;
      const position = new Microsoft.Maps.Location(lat, lon);
      this.streetsideMap.setView({ center: position }) // SETTING VIEW HERE
    });
  }

  createStreetSideMap() {
    this.streetsideMap = new Microsoft.Maps.Map(
      this.streetsideMapViewChild.nativeElement,
      {
        mapTypeId: Microsoft.Maps.MapTypeId.streetside,
        streetsideOptions: {
          overviewMapMode: Microsoft.Maps.OverviewMapMode.hidden,
          showExitButton: false
        }
      }
    );
  }
}
...