为什么路由器没有在 Angular 2 的 html 模板中正确更新数据？

Question

我有以下解析器：

@Injectable()
export class DashboardDataResolver implements Resolve<division> {
    constructor( private service: dashboardService, private router: Router ) {}

    resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<division> | Promise<division> | any {
        console.log(route.params);
        let id           = route.params[ 'id' ];
        let divisionType = route.params[ 'divisionType' ];
        return this.service.getDivisionData(id, divisionType).then(data => {
            if ( data ) return data;
            else {
                this.router.navigate([ '/dashboard' ]).then(() => 'success');
                return null;
            }
        });
    }
}

一个组件 DashboardMapComponent 包含两个订阅，一个用于加载几个 geojson 文件，另一个用于加载应用程序所需的一堆其他 json 文件：

ngOnInit(): void {
    this.selectsSubscription = this.dashboardService.loadAllSelects().subscribe(() => this.selectsDataInit());
    this.mapSubscription     = this.service.loadGeoJson().subscribe(() => this.geoJsonInit().then(() => this.onMapsReady()).catch(( error: Error ) => console.log('map not properly loaded')));
}

private selectsDataInit() {
    this.selects = this.route.params.switchMap(( params: Params ) => {
        this.selectedId = params[ 'id' ];
        return dashboardService.getAllSelects();
    })
}

ngOnDestroy(): void {
    this.selectsSubscription.unsubscribe();
    this.mapSubscription.unsubscribe();
}

private geoJsonInit(): Promise<any> {
    return dashboardMapService.getAllGeoJsonData().then(( geoData: Array<Object> ) => this.geoJsonData.push(...geoData))
                              .then(() => this.navigateToDivision('dubai', 'city'))
                              .catch(( error: Error ) => console.log('failed to push geoJsonData'));
}

请注意，onMapsReady 会绘制谷歌地图。

还有一个包含以下内容的 DashboardDataComponent：

this.subscription = this.route.data.subscribe(( d: { data: division } ) => {
            console.log(d.data);
            this.selectedDistrict = d.data
        });

我面临的问题是，在 DashboardDataComponent 的 html 中，我通过点击谷歌地图获取的地区名称第一次显示，并且在我玩地图时不再更新（它应该如果我单击一个多边形，则更新到该区域），奇怪的是，当我在组件 B 中记录值时，它会显示获取的正确数据。进行 html 更新的唯一方法是在路由之间切换并返回组件 B。

我使用以下语法在dashboardMapComponent 中导航：

private navigateToDivision( divisionId: string, divisionType: string ): void {
        if ( divisionId ) {
            this.selectedId = divisionId;
            this.router.navigate([ divisionId, { divisionType: divisionType } ], { relativeTo: this.route }).then(() => 'successfully loaded selects');
        }
    }

我该如何解决这个问题？

注意地图下方的html：

点击后应该会更新为迪拜土地（迪拜应该被迪拜土地取代）（上图）。问题再次在于，它仅在切换到不同的路线并返回仪表板后才会更新。

另外，这是我的路由器：

const dashboardCenterRoutes: Routes = [ {
    path: '',
    component: DashboardCenterComponent,
    children: [ {
        path: '',
        component: DashboardMap,
        children: [
            {
                path: ':id',
                component: DashboardDataComponent, resolve: { data: DashboardDataResolver }
            }
        ]
    } ]
} ];

Answer 1

我记得在某处看到与地图相同的问题，由于某种原因没有进行更改检测。我现在在任何地方都找不到这个问题......

但您可以尝试使用 NgZone

解决此问题

import { Component, OnInit, NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

并将不更新视图的代码包装在：

this.ngZone.run(() => { ...your code here ...})