角度/材质模式对话框不适用于Google地图的形状点击

Question

在我的应用程序中，我使用Google地图来显示形状（多边形/圆圈）和标记。我正在使用google地图的类型定义“npm install --save @ types/googlemaps”以角度使用Google地图。我必须打开形状点击的模式对话框。我已经写了下面的代码这样做：

google.maps.event.addListener(shape, 'click', (event) => { 
     let customData = shape.CustomData; 

     this.config.data = 
      { 
       companyId: this.companyId, 
       siteId: customData.SiteId, 
       siteName: customData.SiteName 
      }; 
     this.dialog.open(SiteFloorDetailsComponent, this.config); 

    }); 

其打开SiteFloorDetailsComponent的模式弹出和构造也被调用。但是SiteFloorDetailsComponent中的ngOnInit函数没有被调用，它不会动态加载数据和内容。另外，如果我尝试使用关闭按钮关闭模式弹出窗口，则会调用SiteFloorDetailsComponent中的关闭事件，但模式弹出窗口不关闭，也不会在控制台窗口中给出任何错误。如果我移动模态开码出形状click事件像低于其做工精细：

this.config.data = 
     { 
      companyId: this.companyId, 
      siteId: 1, 
      siteName: "" 
     }; 
    this.dialog.open(SiteFloorDetailsComponent, this.config); 

    google.maps.event.addListener(shape, 'click', (event) => { 

    }); 

SiteFloorDetailsComponent TS码：

import { Inject, Component, ViewEncapsulation, OnInit, EventEmitter } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 

import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; 

import { AssetsService } from '../../../Services/Assets/assets.service'; 
import { SlimLoadingBarService } from 'ng2-slim-loading-bar'; 
import { LowryToastyService } from '../../../Services/Shared/lowrytoasty.service'; 
import { ErrorLoggerService } from '../../../Services/Shared/errorlogger.service'; 

@Component({ 
selector: "SiteFloorDetailsComponent", 
templateUrl: '../app/Components/Assets/AssetSearch/site-floor-details.component.html', 
providers: [AssetsService] 
}) 
export class SiteFloorDetailsComponent { 
siteFloorDetails: any[]; 
siteName: string; 
companyId: number; 

constructor(
    @Inject(MD_DIALOG_DATA) private modelPopupData: 
     { 
      companyId: number, siteId: number, siteName: string 
     }, 
    public dialogRef: MdDialogRef<SiteFloorDetailsComponent>, 
    private assetService: AssetsService, 
    private slimLoadingBarService: SlimLoadingBarService, 
    private lowryToastyService: LowryToastyService, 
    private errorLoggerService: ErrorLoggerService, 
    private router: Router) { 
    this.siteName = this.modelPopupData.siteName; 
    this.companyId = this.modelPopupData.companyId; 
}; 

ngOnInit() { 
    debugger; 

    this.assetService.getBuildingFloorDetails(this.modelPopupData.companyId, this.modelPopupData.siteId).subscribe(
     (jsonData) => { 
      this.siteFloorDetails = jsonData; 
     }, 
     (error) => { 
      this.errorLoggerService.logErrorToServer("SiteFloorDetailsComponent", "ngOnInit", error); 
     }, 
     () => { 
      //this.slimLoadingBarService.complete(); 
     } 
    ); 
} 

closeModel() { 
    this.dialogRef.close(); 
}; 
} 

站点地板details.component.html：

<h1 md-dialog-title class="primary-color borderBtm "> 
Site-Floor Details 

</h1> 

<md-dialog-content class="accent-color"> 
<div style="min-width:200px"> 
    <div class="row" style="text-align:center;"> 
     <h5>{{siteName}}</h5> 
    </div> 
    <div class="row"> 
     <div *ngFor="let item of siteFloorDetails" class="col-md-3"> 
      <a href="#" [routerLink]="['/RTLSAssets/'+companyId+ '/' + item.FloorId]">{{item.BuildingName}} - {{item.FloorName}}</a> 
     </div> 
    </div> 
</div> 
</md-dialog-content> 
<md-dialog-actions class="float-right"> 
    <!--<button *ngIf="showSaveButton" type="button" class="cust- btn">Save</button>--> 
    <div style="width:10px;"></div> 
    <button type="button" (click)="closeModel()" class="cust-btn">Close</button> 
</md-dialog-actions> 

请帮助我，让我知道，如果我失去了什么。

Answer 1

我发现solusion。由于google.map.event触发的事件不在Angular上下文中，因此您需要使用NgZone::run方法。

constructor(
    private zone: NgZone) { 
    } 
    // ... 
    google.maps.event.addListener(shape, 'click', (event) => { 
     let customData = shape.CustomData; 

     this.config.data = 
      { 
       companyId: this.companyId, 
       siteId: customData.SiteId, 
       siteName: customData.SiteName 
      }; 
     this.zone.run(() => { 
      this.dialog.open(SiteFloorDetailsComponent, this.config); 
     }); 


    }); 

Answer 2

你的组件需要实现的OnInit，即：

import {OnInit} from '@angular/core'; 
// ... 
export class SiteFloorDetailsComponent implements OnInit { } 

Answer 3

不错！我只是看到了缺失的implements OnInit并停止思考=）

如果我错了，请纠正我，但使回调中的Observable应该可以工作，并且从长远来看更有用，因为您可以将源代码传递给有其他副作用或其他。所以像这样：

const mapClickFactory = Observable.fromCallback(google.maps.event.addListener); 
const source = mapClickFactory(shape, 'click'); 

this.subscriptions.push(
    source.subscribe(event => { 
     let customData = shape.CustomData; 
     this.config.data = { 
      companyId: this.companyId, 
      siteId: customData.SiteId, 
      siteName: customData.SiteName 
     }; 
     this.dialog.open(SiteFloorDetailsComponent, this.config); 
    }) 
); 
/* Remember to call this.subscriptions.forEach(sub => sub.unsubscribe()) 
    in ngOnDestroy() of this component! */