组件在使用contentChildren角度6-7时不会得到routerLink

Question

我有一个多页的应用程序(角-路由器，旋转-出口设置显示角组件.)。在其中一个页面上，我有一个外部库，这是我自己构建的，并且已经发布给了一家主持NPM回购的公司。当我手动输入URL时，我的lib工作得很好，但是当我使用routerLink进行路由时，父组件(Afgm)会为@ContentChildren (Afgm)获取一个空数组。在afgm组件中，我已经放入了一个console.log(markerRefs)，它在我进入页面时打印标记/s，但是当我使用链接路由到页面时，它会打印一个空数组。

:(

如果我已经使用链接到页面并按下F5，它可以正常工作。有什么想法吗？

在我的pageTemplate上，我将库呈现如下：

<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

似乎是一种种族状况。我的map组件依赖于要加载的外部脚本，但我仍然希望能够以确定的方式挂载组件。我所做的修复工作是让标记将它们自己添加到父节点(子构造函数中的DI父节点，然后运行"mapComp.addMarker(this)")，当父标记完成它的设置时，它检查markers.length >0并运行renderMarkers(this.markers)并设置this.initialized = true。在addMarker中，我检查this.initialized === true，如果是，我运行renderMarkers(标记)。所以它既是“皮带”又是“支架”..。