Javascript “角度/材质模式”对话框在google map'；s形点击

在我的应用程序中，我使用谷歌地图来显示形状（多边形/圆）和标记。我使用谷歌地图的类型定义“npm安装——保存@types/googlemaps”在angular中玩谷歌地图。我必须打开一个模态对话框点击形状。我已经编写了以下代码来实现这一点：

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的模式pop和构造函数也被调用。但是，未调用SiteFloorDetailsComponent中的Ngonit函数，也未动态加载数据和内容。另外，如果我尝试使用“关闭”按钮关闭模式弹出窗口，则会调用SiteFloorDetailsComponent中的关闭事件，但模式弹出窗口不会关闭，也不会在控制台窗口中显示任何错误。如果我将模态打开代码移出形状，请单击事件，如下所示：

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

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

    });

SiteFloorDetails组件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();
};
}

从'@angular/core'导入{Inject，Component，viewenclosuration，OnInit，EventEmitter}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“@angular/material”导入{MdDialogRef，MD_DIALOG_DATA}；
从“../../../Services/Assets/Assets.service”导入{AssetsService}；
从“ng2 slim loading bar”导入{SlimLoadingBarService}；
从“../../../Services/Shared/lowrytoasty.service”导入{LowryToastyService}；
从“../../../Services/Shared/errorlogger.service”导入{ErrorLoggerService}；
@组成部分({
选择器：“SiteFloorDetailsComponent”，
templateUrl:“../app/Components/AssetSearch/site floor details.component.html”，
提供者：[资产服务]
})
导出类SiteFloorDetailsComponent{
siteFloorDetails：任何[]；
siteName:string；
公司ID：编号；
建造师(
@注入（MD_对话框_数据）私有模型PopUpdatea:
{
公司ID:编号，站点ID:编号，站点名称：字符串
},
公共dialogRef:MdDialogRef，
私人资产服务：资产服务，
专用slimLoadingBarService:slimLoadingBarService，
私人lowryToastyService:lowryToastyService，
私人errorLoggerService:errorLoggerService，
专用路由器（路由器）{
this.siteName=this.modelpopupdatea.siteName；
this.companyId=this.modelpopupdatea.companyId；
};
恩戈尼尼特（）{
调试器；
this.assetService.getBuildingFloorDetails（this.modelpopUpdatea.companyId，this.modelpopUpdatea.siteId）。订阅(
（jsonData）=>{
this.siteFloorDetails=jsonData；
},
（错误）=>{
this.errorLoggerService.logErrorToServer（“SiteFloorDetailsComponent”，“ngonit”，error）；
},
() => {
//this.slimLoadingBarService.complete（）；
}
);
}
closeModel（）{
this.dialogRef.close（）；
};
}

site-floor-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>

现场楼层详图
{{siteName}}
接近

---

如果我遗漏了什么，请帮助我并让我知道。

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

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

---

我找到了solusion。由于从google.map.event触发的事件不在角度上下文中，所以需要使用

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);
        });


    });

---

很好！我刚刚看到缺少的

实现了OnInit

并停止思考=）

如果我错了，请纠正我，但是从回调中生成一个可观察性也应该有效，并且从长远来看更有用，因为您可以通过管道将源代码传递到其他副作用或其他任何方面。比如：

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! */

---

你在这方面有进展吗？我也有同样的问题，我确实在IT上实现了，但没有工作。。。恩戈尼尼特从未被称为。。仅在TomP处的ConstructorTank u。这个问题和我用ng zone解决的问题是一样的。这个确实有效，不能说理解这个区域的事情，但它有效。这也不是解决方案。。。静止事件在下一个外部触发。我尝试了主题和ngrx商店的操作，但没有任何效果。。。你需要使用NgZooneOk很好，我不是100%确定这样做是否足够。fromCallback.：）