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

Question

我正在使用Angular 2谷歌地图我们的应用程序之一.我们使用套接字每5秒加载一次标记.当新标记从套接字接收时,需要删除先前的标记.Angular地图官方网站上没有适当的文件.所以想到从我们的app组件中销毁组件.我们让所有子组件找到以下代码.

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

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

解决方案:我犯了愚蠢的错误,忘记在推动前将标记数组清空.

Answer 1

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

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

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