Nativescript Angular ActionBar does not change between Child components


#1

Hi,

In my nativescript angular project in the Main Component I have two child components (TestComponent and Test1Component) each having two different implementations of an action bar in the two layouts.

My problem is that when I navigate between the two child components the action bar does not change in the view.

However when I navigate outside the Main component to a different component (Test2 Component) and from there I return to any of the two child components the action bar displays correctly. Can someone tell me how to get the action bar to show correctly when navigating between the two child components.

My Code is as follows:

    import { TestComponent } from "./test.component";
    import { AppComponent } from "./app.component";
    import { Test1Component } from "./test1.component";
    import { Test2Component } from "./test2.component";

        export const AppRoutes: any = [
    {
        path: "main", component: AppComponent,
        children: [
            { path: "0", component: TestComponent },
            { path: "1", component: Test1Component },
            { path: "", redirectTo: "0", pathMatch: "full" },
        ],
    },
    { path: "", redirectTo: "main", pathMatch: "full" },
    { path: "other", component: Test2Component, pathMatch: "full" },
        ];

Test and Test1 Component (the 2 child components) look like this

   import { Component } from '@angular/core';
   import { Router } from "@angular/router";

        @Component({
            selector: 'test1',
            templateUrl: `./test1.component.html`
        })
        export class Test1Component {

    constructor(private router: Router) {
        console.log("*********************** Now I am in test1 component *********************");
    }

    goToTest() {
        this.router.navigate(["/main/0"]);
    }

    goToOthers() {
        this.router.navigate(["/other"]);
    }
  }

The Html layout for both components is similar with different layouts in the action bar in each

<StackLayout>
    <StackLayout sdkToggleNavButton>
        <ActionBar title="Welcome to Test 1" backgroundColor="#f82462" color="white">
        </ActionBar>
    </StackLayout>
    <StackLayout>
        <Label text="Hi," textWrap="true"></Label>
        <Label text="Hey I am Test-1, don't confuse with Test" textWrap="true"></Label>
        <Button text="Go To Test" (tap)="goToTest()"></Button>
        <Button text="Go To Other" (tap)="goToOthers()"></Button>
    </StackLayout>
</StackLayout>

Finally the parent layout is like this

<GridLayout rows="*, auto">
    <StackLayout row="0" orientation="vertical">
        <Label text="demo text"></Label>
        <router-outlet></router-outlet>
    </StackLayout>
</GridLayout>

You can also look at this issue in my githubrepo

Please Help!