nativescript-angular：使用路由器导航后UI不会更新

Question

在我离开初始视图然后返回使用此组件的路径后，我遇到了问题：

map.component.ts

import {Component, OnInit, ViewChild } from "@angular/core";
import {RadSideDrawerComponent, SideDrawerType} from "nativescript-telerik-ui-pro/sidedrawer/angular";
import {registerElement} from "nativescript-angular/element-registry";
import {MapView} from "nativescript-google-maps-sdk";
import * as app from "tns-core-modules/application";
import {connectToSDK} from "../../utils/connect-sdk";

declare const io;
declare const zonedCallback: Function;

registerElement('MapView', () => MapView);

@Component({
  selector: "ns-map",
  templateUrl: "pages/map/map.html",
  styleUrls: ["pages/map/map.css"]
})
export class MapComponent implements OnInit {
  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private drawer: SideDrawerType;
  public currentFloor: string;
  public mapHelper: any = null;

  constructor() {}

  public ngOnInit() {
    connectToSDK();
  }

  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
  }

  public openDrawer() {
    this.drawer.toggleDrawerState();
  }

  //Map events
  onMapReady(args) {
    const googleMap = args.object.gMap;
    const extension = {
      changedFloor: zonedCallback(this.changeFloor.bind(this))
    };
    const mapListener = io.proximi.proximiiolibrary.ProximiioGoogleMapHelper.Listener.extend(extension);

    this.mapHelper = new io.proximi.proximiiolibrary.ProximiioGoogleMapHelper.Builder(app.android.context, googleMap)
      .listener(new mapListener)
      .build();

    googleMap.setOnMyLocationButtonClickListener(this.mapHelper);
    googleMap.setOnMapClickListener(this.mapHelper);
    googleMap.setOnCameraIdleListener(this.mapHelper);
    googleMap.setOnMarkerClickListener(this.mapHelper);
    googleMap.setOnCameraMoveStartedListener(this.mapHelper);
    //console.dir(mapHelper);
  }

  public floorUp(): void {
    if (this.mapHelper != null) {
      this.mapHelper.floorUp();
    }
  }

  public floorDown(): void {
    if (this.mapHelper != null) {
      this.mapHelper.floorDown();
    }
  }

  public changeFloor(floor): void {
    if (floor !== null) {
      this.currentFloor = floor.getName();
      console.log('floor changed - ' + this.currentFloor);
    } else {
      this.currentFloor = '';
      console.log('floor exit');
    }
  }

}

map.view.html

<RadSideDrawer tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <ns-drawer></ns-drawer>
    </StackLayout>

    <StackLayout tkMainContent>
        <ActionBar title="Proximi.io" class="action-bar">
            <NavigationButton icon="res://ic_menu" (tap)="openDrawer()"></NavigationButton>
            <StackLayout orientation="horizontal"
                         ios:horizontalAlignment="center"
                         android:horizontalAlignment="left">
                <Image src="res://logoinlineheading" class="action-image" width="150"></Image>
            </StackLayout>
        </ActionBar>
        <GridLayout rows="40, *">
            <StackLayout row="0">
                <GridLayout columns="*, 40, 40" class="submenu">
                    <Label [text]="currentFloor" *ngIf="currentFloor" col="0"></Label>
                    <Label text="No floors found at your location!" *ngIf="!currentFloor" col="0"></Label>
                    <Button class="fa" [text]="'fa-arrow-up' | fonticon" col="1" (tap)="floorUp($event)" *ngIf="currentFloor"></Button>
                    <Button class="fa" [text]="'fa-arrow-down' | fonticon" col="2" (tap)="floorDown($event)" *ngIf="currentFloor"></Button>
                </GridLayout>
            </StackLayout>
            <MapView #mapView (mapReady)="onMapReady($event)" row="1"></MapView>
        </GridLayout>
    </StackLayout>
</RadSideDrawer>

问题是“currentFloor”字符串应该来自“changeFloor”函数，它在第一次运行时显示“currentFloor”，并且当我到达另一个视图并使用本机后退按钮时，但是在导航到另一个视图的情况下而不是通过使用路由器导航返回它不会改变UI中的“currentFloor”，而我可以在控制台中看到它已成功分配给变量。

navigation.html

<StackLayout class="sideStackLayout menu">
    <GridLayout rows="auto" columns="25, *" [nsRouterLink]="['/map']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}" class="menu-item">
        <Label class="fa" [text]="'fa-map-o' | fonticon" row="0" col="0"></Label>
        <Label text="Map Demo" row="0" col="1"></Label>
    </GridLayout>
    <GridLayout rows="auto" columns="25, *" [nsRouterLink]="['/place_list']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}" class="menu-item">
        <Label class="fa" [text]="'fa-map-marker' | fonticon" row="0" col="0"></Label>
        <Label text="Places" row="0" col="1"></Label>
    </GridLayout>
</StackLayout>

所以要清楚，我有一个初始视图“/ map”，其中一切正常，直到我导航到“/ place_list”然后仍然使用路由器，返回“地图”视图。之后，如果检测到任何楼层与初始视图中的楼层相同，则应更改UI。

app.routing.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { LoginComponent } from "./pages/login/login.component";
import { MapComponent } from "./pages/map/map.component";

import { PlaceListComponent } from "./pages/place/list/place-list.component";
import { PlaceFormComponent } from "./pages/place/form/place-form.component";
import { PlaceDetailComponent } from "./pages/place/detail/place-detail.component";


const routes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full"},
    { path: "login",                                component: LoginComponent },
    { path: "map",                                  component: MapComponent },
    { path: "place_list",                           component: PlaceListComponent },
    { path: "place_form/:id",                       component: PlaceFormComponent },
    { path: "place_detail/:id",                     component: PlaceDetailComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

我真的很感激任何帮助。感谢。