nativescript-angular: UI won't update after using router navigation

Question

I'm having an issue after I navigate out of the initial view and then back using routes to this component:

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

the problematic is "currentFloor" string which should come from "changeFloor" function, it's showing "currentFloor" fine on first run and also when I reach another view and use the native back button, but in case of navigating to another view and than back by navigation using router it won't change the "currentFloor" in UI while I can see in console that it was assigned successfully to the variable.

navigation.html

So to be clear, I have a initial view "/map" where everything works ok, until I navigate to "/place_list" and then still using the router, back to "map" view. After that UI should be changed based on that if any floor has been detected same as was on initial view.

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 { }

I'm really grateful for any kind of help. Thanks.

nativescript-angular: UI won't update after using router navigation

0 Answers