Nativescript Angular ActionBar ändert sich nicht zwischen Child-Komponenten

Question

In meinem nativescript eckigen Projekt in der Hauptkomponente habe ich zwei untergeordnete Komponenten (TestComponent und Test1Component) jeweils zwei verschiedene Implementierungen einer Aktionsleiste in den beiden Layouts.

Mein Problem ist, dass wenn ich zwischen den zwei untergeordneten Komponenten navigiere die Aktionsleiste in der Ansicht nicht ändert.

Wenn ich jedoch außerhalb der Hauptkomponente zu einer anderen Komponente (Test2-Komponente) navigiere und von dort zu einer der beiden untergeordneten Komponenten zurückkehrt, wird die Aktionsleiste korrekt angezeigt. Kann mir jemand sagen, wie die Aktionsleiste korrekt angezeigt wird, wenn zwischen den beiden untergeordneten Komponenten navigiert wird?

Bearbeiten: Beim Experimentieren habe ich festgestellt, dass das Verhalten passiert, wenn ich eine SearchBar innerhalb der Aktionsleiste in TestComponent hinzufügen. Auch wenn in Test1Component keine searchBar vorhanden ist, wird die Suchleiste weiterhin angezeigt.

My-Code ist wie folgt:

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 und Test1 Komponente (die 2 Kind-Komponenten) so aussehen

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"]); 
    } 
} 

das HTML-Layout für beide Komponenten ist ähnlich mit verschiedenen Layouts in der Aktionsleiste in jedem

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> 

schließlich das übergeordnete Layout wie diese

ist

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

Sie auch zu diesem Thema in meinem githubrepo

Bitte Hilfe freuen!

Answer 1

Es scheint, als ob Sie zwei "Haupt" -Seiten haben. eine ist "Hauptleitung" und die andere ist "App-Komponente". Obwohl Sie "Hauptleitungen" in Ihrem Bootstrip "booten", zeigen Sie Ihre Startseite auf "appComponent". und dort benutzt du "router-outlet".

Ich denke, das ist, wo Ihr Problem liegt.