Компонент не получает contentChildren при использовании routerLink angular 6-7

Question

У меня есть приложение с несколькими страницами (anguler-router, roter-outlet, настроенный для показа угловых компонентов ...).На одной из страниц у меня есть внешняя библиотека, которую я сам создал и опубликовал в репозитории NPM, размещенном в компании.Моя библиотека прекрасно работает, когда я ввожу URL-адрес вручную, но когда я маршрутизирую с routerLink, родительский компонент (afgm-map) получает пустой массив для @ContentChildren (afgm-marker).В компоненте afgm-map я поместил файл console.log (markerRefs), который печатает маркер / маркеры при переходе на страницу, но когда я перехожу на страницу со ссылкой, он печатает пустой массив.

:(

Если я использовал ссылку, чтобы перейти на страницу и нажать F5, она работает нормально. Есть идеи?

На моей странице шаблона я отображаю библиотеку следующим образом:

<afgm-map [center]="data.position" (toggleExpand)="expandMap($event)">
  <afgm-marker [position]="data.position"></afgm-marker>
</afgm-map>

Код компонента карты с журналом консоли для отладки:

export class MapComponent implements OnInit {
  @Input()
  center!: google.maps.LatLng;
  @Input()
  zoom = 15;
  @Output()
  toggleExpand: EventEmitter<boolean> = new EventEmitter();
  @ViewChild('mapViewPort')
  mapViewPort: ElementRef;

  @ContentChildren(MarkerComponent)
  markersRefs: MarkerComponent[] = [];

  expanded: boolean;
  map: any;
  markers: google.maps.Marker[];

  constructor() {}

  ngOnInit() {
    ...
      this.onInit();
  }

  onInit() {
    this.map = new google.maps.Map(this.mapViewPort.nativeElement, {
      center: this.center,
      zoom: +this.zoom,
      disableDefaultUI: true,
      scaleControl: true
  });

console.log (this.markersRefs);

    this.markers = this.markersRefs.map(m => {
      return new google.maps.Marker({
        position: m.position,
        icon: m.icon,
        map: this.map
      });
    });
  }
  ...
}

Компонент маркера - это просто компонент оболочки без реальной логики / шаблона:

export class MarkerComponent implements OnInit {
  @Input()
  position!: google.maps.LatLng;

  @Input()
  icon = '/assets/img/mapMarker49px.png';

  constructor() {}
}

Answer 1

Кажется, это состояние гонки.Мой компонент карты зависит от загрузки внешнего скрипта, но я все еще ожидаю, что angular будет монтировать компонент детерминистическим способом.Чтобы исправить это, я позволил маркерам самим рекламировать себя родителю (родительский элемент DI в конструкторе дочернего элемента, а затем дочерний элемент запускает «mapComp.addMarker (this)»), когда родительский объект завершает настройку.он проверяет markers.length> 0 и запускает renderMarkers (this.markers) и устанавливает this.initialized = true.В addMarker я проверяю this.initialized === true, если так, я запускаю renderMarkers ([marker]).Так что это и «пояс», и «брекеты» ...