带有清除历史记录的NativeScript / Angular嵌套路由问题

Question

I have an issue with routing in NativeScript 3.4 that drives me nuts. The idea of this test project is that the root app component is using a <page-router-outlet> and then using nested angular routing using <router-outlet> it loads a login parent and child, through which I am navigating to a main page which has two child routes.

If I route from the login.child.ts to the main parent/child with this.router.navigate(['/main']); then everything works fine and I continue alternating between the two children.

However, if I route to the main with clearing history this.router.navigate(['/main'],{ clearHistory: true });, which is what I want because after login I don’t want the user to be able to “go back” to the login, then I am correctly reaching the main parent with the first child, but then am unable to navigate to the other child.

Any ideas as to what I am doing wrong?

这是我正在使用的路由：

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginParent,
    children: [
      { path: "", redirectTo: "loginchild", pathMatch: "full" },
      { path: "loginchild", component: LoginChild },
    ]
  },
  { path: "main", component: MainParent,
    children: [
      { path: "", redirectTo: "mainchild", pathMatch: "full" },
      { path: "mainchild", component: MainChild },
      { path: "otherchild", component: OtherChild },
    ]
  }
];

编辑：当我将主路径包装在包含<page-router-outlet>以下内容的组件中时，所有组件都开始工作。但是，似乎有点麻烦。我很高兴了解它如何更整洁（也许NativeScript 4中的更改允许更轻松地处理）？

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginParent,
    children: [
      { path: "", redirectTo: "loginchild", pathMatch: "full" },
      { path: "loginchild", component: LoginChild },
    ]
  },
  { path: "main", component: AppComponent,
    children: [
      { path: "", component: MainParent,
        children: [
          { path: "", redirectTo: "mainchild", pathMatch: "full" },
          { path: "mainchild", component: MainChild },
          { path: "otherchild", component: OtherChild },
        ]
      }
    ]
  }
];