Angular - Ist es möglich, Komponente zu zerstören (nicht dynamisch erstellt)?

Question

Ich verwende Angular 2 google map eine unserer Anwendung. Wir laden Marker alle 5 Sekunden mit Sockets. Das Problem besteht darin, vorherige Markierungen zu entfernen, wenn neue Markierungen vom Socket empfangen werden. Es gibt keine richtigen Dokumente in der offiziellen Website der Angular Map. So gedacht, Komponenten aus unseren App-Komponenten zu zerstören. Und wir haben alle untergeordneten Komponenten den folgenden Code finden.

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>

Wir haben alle Komponenten Kind aber verweisen nach wie vor gibt es Abfrageliste SebmGoogleMapMarkers. Gibt es auf jeden Fall Komponentenwinkel weg zu zerstören?

Eigentlich hier mein Anliegen ist dies. SebmGoogleMapMarkers.length wird alle 5 Sekunden erhöht. Was ich fühle ist, dass die Anwendungsleistung reduziert wird.

Lösung: Ich machte dummen Fehler vergessen, Marker-Array leer zu machen, bevor Sie drücken.

Answer 1

Soweit ich weiß, gibt es keine Möglichkeit, eine Komponente zu zerstören, die nicht dynamisch hinzugefügt wurde. Sie können *ngIf verwenden wenn eine Komponente zu entfernen:

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

Sie können auch Ihre eigene *ngIf Variante erstellen, die die Logik zum Beispiel enthält die Komponente zu entfernen, wenn sie nicht mehr benötigt. Eine solche Strukturanweisung zu erstellen ist ziemlich einfach (https://angular.io/docs/ts/latest/guide/structural-directives.html)