Angular

Question

我正在使用 Angular 2 google map 我们的应用程序之一。我们使用套接字每 5 秒加载一次标记。问题是当从套接字接收到新标记时需要删除以前的标记。 Angular 地图官网没有合适的文档。所以想到了从我们的应用程序组件中销毁组件。并且我们得到了所有的子组件，找到下面的代码。

import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { Socket } from 'ng2-socket-io';
import { Marker } from './google-map';
import { SebmGoogleMapMarker } from 'angular2-google-maps/core';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss'],
  providers: [SebmGoogleMapMarker]
})
export class GoogleMapComponent implements OnInit {
  public lat: number = 51.678418;
  public lng: number = 7.809007;
  public markers: Marker[] = [];
  @ViewChildren(SebmGoogleMapMarker) SebmGoogleMapMarkers: QueryList<SebmGoogleMapMarker>;
  constructor(private socket: Socket) { }

  ngOnInit() {
    this.socket.on('markers', this.setMarkers);
  }

  setMarkers = (data: Marker[]) => {
    this.removeMarkers();
    for (let marker of data) {
      var model = new Marker(marker);
      this.markers.push(model);
    }
  }

  removeMarkers() {
    if (this.SebmGoogleMapMarkers.length > 0) { 
      this.SebmGoogleMapMarkers.forEach((ele) => {
        ele.ngOnDestroy();
      });
    }
  }
}

<div class="col-lg-12">
  <sebm-google-map [latitude]="lat" [longitude]="lng">
    <sebm-google-map-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>
</div>

我们获得了所有子组件，但仍然参考那里的 SebmGoogleMapMarkers 查询列表。有没有销毁组件 angular 的方式？

实际上我担心的是 this.SebmGoogleMapMarkers.length 每 5 秒增加一次。我的感觉是应用程序性能会降低。

解决方案：我犯了一个愚蠢的错误，忘记在推送之前让标记数组为空。

Answer 1

据我所知，没有办法销毁不是动态添加的组件。不过，您可以使用 *ngIf 删除组件：

<sebm-google-map-markers *ngIf="show">

您还可以创建自己的 *ngIf 变体，例如包含在不再需要时删除组件的逻辑。创建这样的结构指令非常简单(https://angular.io/docs/ts/latest/guide/structural-directives.html)

Angular - 是否可以销毁组件（不是动态创建的）？

Angular - Is it possible to destroy component (not dynamically created)?

google-maps

angular-google-maps