Nativescript Angular ActionBar 不会在子组件之间更改

Question

在主组件中的 nativescript angular 项目中，我有两个子组件（TestComponent 和 Test1Component），每个子组件在两个布局中都有两个不同的操作栏实现。

我的问题是，当我在两个子组件之间导航时，视图中的操作栏不会改变。

但是，当我在主组件之外导航到另一个组件（Test2 组件）并从那里返回到两个子组件中的任何一个时，操作栏会正确显示。有人可以告诉我在两个子组件之间导航时如何让操作栏正确显示。

编辑：在实验中，我发现当我在 TestComponent 的操作栏中添加 SearchBar 时会发生这种行为。即使 Test1Component 中没有 searchBar - 搜索栏也会继续显示。

我的代码如下：

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 和 Test1 组件（2 个子组件）如下所示

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

两个组件的 Html 布局相似，每个组件的操作栏布局不同

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>

    

最后父布局是这样的

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

  

你也可以在我的githubrepo查看这个问题

请帮忙！

Answer 1

您似乎有两个“主要”页面。一个是“mains”，另一个是“app.component”。 即使您在路由中引导“mains”，将您的起始页指向“appComponent”。在那里你使用“路由器插座”。

我认为这就是你的问题所在。