gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:39:22 25 4
gpt4 key购买 nike

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

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 秒增加一次。我的感觉是应用程序性能会降低。

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

最佳答案

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

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

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

关于google-maps - Angular - 是否可以销毁组件(不是动态创建的)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43954826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com