角度/材質模式對話框不適用於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! */