Nativescript Angular ActionBar does not change between Child components

Question

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.

Edit: On experimentation I found that the behavior happens when I add a SearchBar inside the action bar in TestComponent. Even when there is no searchBar in Test1Component - the search bar continues to show.

My Code is as follows:

app.routing.ts

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

Test1Component.html

        <ActionBar title="Welcome to Test 1" backgroundColor="#f82462" color="white">
        </ActionBar>
   
    <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>

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!

Is there a reason for placing the <ActionBar></ActionBar> inside two nested StackLayout. Everywhere I have seen ActionBar in {N} + Angular it is declared in the root of the Component HTML. — Vladimir Amiorkov
@VladimirAmiorkov - Have removed the nested StackLayouts . The ActionBar changes on navigating between pages if there is nothing in the ActionBar. However the moment I insert a SearchBar within the ActionBar in TestComponent, it (the SearchBar) continues to show in Test1Component. — Anurag
I think the issue is that you have a router-outlet rather than a page-router-outlet. I think that this is how the router-outlet works, imagine a inner container to which you simply change the content rather that do a full new Page creation (navigation) — Vladimir Amiorkov

MatanCo MatanCo · Accepted Answer · 2017-06-21T09:17:32

It seems like you have two "main" pages. one is "mains" and the other is "app.component". even though you bootstrap "mains" in you routing your'e pointing your start page to "appComponent". and there you use "router-outlet".

I think that is where your problem lays.

Nativescript Angular ActionBar does not change between Child components

1 Answers