0

我有一个包含多个页面的应用程序（角度路由器，设置为显示角度组件的转子插座......）。在其中一个页面上，我有一个外部库，是我自己构建的，并已发布到一家托管 NPM 存储库的公司。当我手动输入 URL 时，我的库工作正常，但是当我使用 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>

带有用于调试的控制台日志的地图组件 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
      });
    });
  }
  ...
}

标记组件只是一个外壳组件，没有真正的逻辑/模板：

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

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

  constructor() {}
}
4

1 回答 1

0

似乎是一个比赛条件。我的地图组件依赖于要加载的外部脚本，但我仍然希望 Angular 以确定的方式安装组件。我所做的解决方法是让标记将它们自己添加到父级（子级构造函数中的 DI 父级，然后子级在父级完成设置后运行“mapComp.addMarker(this)”）它检查 marker.length > 0 并运行 renderMarkers(this.markers) 并设置 this.initialized = true。在 addMarker 中，我检查 this.initialized === true 如果是这样我运行 renderMarkers([marker])。所以它既是“腰带”又是“大括号”......

于 2018-11-13T09:05:46.930 回答