Previous color statusbar persist after back button on Android

[calebeaires]

After changing the page view and the color, then when going back previous color statusbar persist. How to update the status bar after back button?

[burkeholland]

Can you post the code you're using to do that?

[ghost]

It's a bit late, but I'm facing the same issue as well. I'm using NativeScript with Angular, and that might have something to do with it, but I've got a status bar compnent on both my home page and the other page:

home.component.ts

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: [ "./home.component.css" ]
})
export class HomeComponent implements OnInit {
    constructor(private routerExtensions: RouterExtensions) {}

    ngOnInit(): void {}

    openCreateOrderPage() {
        this.routerExtensions.navigate(["/other-page"], {
            transition: {
                name: "fade"
            }
        });
    }
}

home.component.html

<StatusBar android:barStyle="#007BB3" ios:barStyle="dark"></StatusBar>

<ActionBar class="action-bar" title="Home"></ActionBar>

<DockLayout class="page">
    <!-- blah blah -->
</DockLayout>

other-page.component.ts

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "CreateOrder",
    moduleId: module.id,
    templateUrl: "./other-page.component.html",
    styleUrls: [ "./other-page.component.css" ]
})
export class OtherPageComponent implements OnInit {
    constructor(private routerExtensions: RouterExtensions) {}

    ngOnInit(): void {}

    back() {
        this.routerExtensions.back();
    }
}

other-page.component.html

<StatusBar android:barStyle="#D3D3D3" ios:barStyle="light"></StatusBar>

<ActionBar class="action-bar" title="Other Page">
    <NavigationButton icon="res://ic_close_black" text="Back" (tap)="back()"></NavigationButton>
</ActionBar>

<StackLayout class="page">
    <!-- something something -->
</StackLayout>

When going from Home -> Other Page, the status bar changes correctly, but when going back, it doesn't - it stays the same color. I registered the StatusBar element in the root app.component.ts as well, and the routing is definitely hooked up correctly, and it does appear to be working in that sense, but I'm not sure what to do about the back button.

[ghost]

I realized it might have something to do with the fact that I use page-router-outlet instead of router-outlet, since the former doesn't regenerate a page when you go back to it. When I change it, the status bar works but the other sections of the page don't render. Plus, I heard this wasn't a best practice? I'm not sure however.