Question

我对离子有一个非常非常奇怪的问题。因此，我尝试点击使用google-maps在地图上绘制的标记，但遇到了2个问题：

当我第一次单击标记时，滑块显示在我的模态上，滑块正在工作并且我有分页。但是我打开了2个弹出窗口，因为该事件被调用了两次。
下次我单击标记时，滑块将显示在我的模态上，滑块不起作用并且我没有分页。事件被调用一次。

我的组件：

export class ProductsOnMapComponent implements OnInit, AfterViewInit {
map: GoogleMap;
shops = [];

constructor(
    public router: Router,
    public productService: ProductService,
    public shopService: ShopService,
    public modalController: ModalController
) {
}

ngAfterViewInit() {
    this.loadMap();
}

ngOnInit() {
}

loadMap() {
    this.map = this.shopService.getMap();
    this.shopService.getShopsMap()
        .then((data: ShopInterface[]) => {
            this.shopService.getProductsMarkers(data).forEach((productData: any) => {
                const marker: Marker = this.map.addMarkerSync(markerData);
                marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
                    console.log('Event Subscribe');
                    this.markerClick(params);
                });
            });
        });

}

markerClick(params: any) {
    console.log('Marker Click 1');
    const marker: Marker = params[1] as Marker;
    marker.hideInfoWindow();
    this.shopService.getList().then(async (campaigns: any) => {
        this.shops = shops;
        const modal = await this.modalController.create({
            component: MarkerModalComponent,
            cssClass: 'modal',
            componentProps: {
                shops
            }
        });
        console.log('Marker Click 2');
        return await modal.present();
    });
}

}

MarkerModalComponent

export class MarkerModalComponent implements OnInit {

@Input() shops;

slideOpts = {
    slidesPerView: 1,
    paginationType: 'fraction'
};

ngOnInit() {

}

constructor(
    public navParams: NavParams,
    public modalController: ModalController
    ) {
    this.shops = navParams.get('shops');
}

closeModal() {
    this.modalController.dismiss({
        dismissed: true
    });
}

}

marker-modal.component.html

<ion-header>
<ion-toolbar>
    <ion-buttons slot="end">
        <ion-icon icon="close" (click)="closeModal()">Close</ion-icon>
    </ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
    <ion-slides pager="true" [options]="slideOpts">
        <ion-slide *ngFor="let shop of shops">
            <shop-card
                [shop]="shop"
            ></shop-card>
        </ion-slide>
    </ion-slides>
</ion-content>

请帮助我。提前谢谢。

标记事件被调用两次，并且滑块仅第一次显示

0 个答案: