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

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”然后仍然使用路由器,返回“ Map ”视图 . 之后,如果检测到任何楼层与初始视图中的楼层相同,则应更改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 { }

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