Question

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

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

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

编辑：在实验中，我发现当我在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

中查看此问题

请帮助！

Answer 1

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

我认为这就是问题所在。

Nativescript Angular ActionBar在子组件

1 个答案: