在主组件中的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 回答
看起来你有两个“主要”页面 . 一个是“主电源”,另一个是“app.component” . 即使你引导“主电源”,你也可以将你的起始页面指向“appComponent” . 在那里你使用“router-outlet” .
我认为这就是你的问题所在 .