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

【问题标题】：How do I implement the <router-outlet> directive in Nativescript to show child routes?如何在 Nativescript 中实现 <router-outlet> 指令以显示子路由？
【发布时间】：2016-12-13 17:44:15
【问题描述】：

我一直在使用带有 Angular 2 和 Typescript 的 Nativescript，并且了解路由器插座有两种选择。原始的角度 <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，但该示例与文档声明的不符。

谁能引导我朝着正确的方向前进？

【问题讨论】：

标签： angular2-routing angular2-nativescript

【解决方案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},
  ]  
},

];

发现这个我有一个新问题，稍后我将在另一个问题中发布并链接到这个答案。

【讨论】：