Question

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

StringBuilder

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();
      });
    }
  }
}

我们获得了所有子组件，但仍然参考了SebmGoogleMapMarkers查询列表。无论如何都要破坏组件角度方式？

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

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

Answer 1

据我所知，无法销毁未动态添加的组件。您可以使用*ngIf删除组件：

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

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

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

1 个答案: