Nativescript Angular ActionBar does not change between Child components - angular2-routing

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!

Answer 1

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.