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 查询列表。反正有没有破坏组件的角度方式？

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

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

Answer 1

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

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

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