使用routerLink angular 6-7时，组件不会获得contentChildren

Question

我有一个多页面的应用程序（anguler-router，roter-outlet设置显示角度组件......）。在其中一个页面上，我有一个外部库，我自己构建，并已发布到公司托管的NPM回购。当我手动输入URL时，我的lib工作正常，但是当我使用routerLink路由时，父组件（afgm-map）获取@ContentChildren（afgm-marker）的空数组。在afgm-map组件中，我放入了console.log（markerRefs），它在我转到页面时打印标记，但是当我使用链接路由到页面时，它会打印一个空数组。

:(

如果我使用链接进入页面并按F5，它工作正常。有任何想法吗？

在我的pageTemplate上我像这样呈现lib：

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

map组件ts代码带有用于调试的控制台日志：

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
      });
    });
  }
  ...
}

标记组件只是一个没有实际逻辑/模板的shell组件：

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]）。所以它既是“腰带”又是“大括号”......