首页 文章

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

提问于
浏览
0

在主组件中的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" },
];

测试和测试1组件(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中查看此问题

请帮忙!

1 回答

  • 0

    看起来你有两个“主要”页面 . 一个是“主电源”,另一个是“app.component” . 即使你引导“主电源”,你也可以将你的起始页面指向“appComponent” . 在那里你使用“router-outlet” .

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

相关问题