如何在 Nativescript 中实现 <router-outlet> 指令来显示子路由？

Question

我一直在使用带有 Angular 2 的 Nativescript 和 Typescript，并且了解路由器插座有两个选项。原始的 angular <router-outlet> 指令可用于显示组件的子路由，以及特定于 nativescript 路由的 <page-router-outlet> 指令。我一直在使用后者并尝试使用 <router-outlet> 指令，但发现它的作用相同。我想要这个场景。

parent.component.html

<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>

这有两个带有 nativescript nsRouterlink 指令的按钮。我希望在路由器插座更新子信息时保留按钮。这是路线。

module.routing.ts

const Routes: Routes = [
  { path: "accounts", children: [
    {path: "", component: ParentComponent },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

问题是，当我尝试这样做时，它会替换整个屏幕，而不会像 <page-router-outlet> 指令那样将按钮留在原地。

我什至遵循了这个 documentation by Nativescript 并且该示例并不像文档声明的那样起作用。

谁能指引我正确的方向？

Answer 1

再次遵循 Nativescript 文档就可以了。一般的解决方案是在路由中更改

const Routes: Routes = [
  { path: "accounts", children: [
    {path: "", component: ParentComponent },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

至

const Routes: Routes = [
  { path: "accounts", component: ParentComponent, children: [
    {path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
    { path: "new-account", component: ChildOneComponent}, 
    { path: "edit-account", component: ChildTwoomponent},
  ]  
},

];

发现这个我有一个新问题，我将 post 在另一个问题中 link 稍后回答这个问题。

如何在 Nativescript 中实现 <router-outlet> 指令来显示子路由？

How do I implement the <router-outlet> directive in Nativescript to show child routes?

angular2-routing

angular2-nativescript