为什么路由器没有在 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 会绘制 google 个地图。

以及包含以下内容的 DashboardDataComponent：

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

我遇到的问题是在DashboardDataComponent的html中，我通过点击google地图获取的小区名称是第一次显示，不再更新当我玩弄地图时（如果我单击一个多边形，它应该更新到该地区），奇怪的是，当我在组件 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 ...})

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

why is the router not updating the data correctly in html template in angular 2?

angular

angular2-routing

observable

angular2-template

angular2-services