如何在Angular 6中正确设置辅助路线？

Question

我在Angular 6中遇到路由问题。我的应用程序右侧有一个侧面菜单，当用户在页面左侧导航时，该菜单会更新。此侧面菜单不在user-dashboard列出用户项目的位置上显示。它需要显示用户选择项目的时间，从而导航到project-home。

下图显示了该组织。一旦用户到达，project-home他们应该elements-list会element-detail在左侧看到从/到主数据/明细数据的流程。独立地，在activities上右手边，用户应该能够通过选项卡点击images，notes和tasks。

更新： 这是一个说明问题的Stackblitz：https ://stackblitz.com/edit/zsoflin-routing

我很茫然，不胜感激如何构造路线的任何方向。谢谢。-扎克

app-routing.module.ts

`
const routes: Routes =[
  { path: 'user-dashboard', component: UserDashboard },
  { path: '', redirectTo: 'user-dashboard', pathMatch: 'full' },
  {
    path: 'project/:projectId',
    component: ProjectHomePage, 
    children:[
        {path: '', component: ElementsPage, pathMatch: 'full'},
        {path: 'element/:elementId', component: ElementPage, pathMatch: 'full'},
        {path: 'edit/:categoryId', component: EditFormPage, pathMatch: 'full'},
        {path: 'act', component:ActivitiesPage, 
            children: [
                {path:'images',outlet:'images',component: ImagesPage},
                {path:'notes',outlet:'notes',component: NotesPage},
                {path:'tasks',outlet:'tasks',component: TasksPage}
            ]
        },
    ]
  }
]
`

project-home.page.html

<ion-split-pane when="md">
<ion-menu type="push" menu-id="activityMenu" side="end" id="menucontent">
    <ion-router-outlet stack name="act"></ion-router-outlet>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

Activities.page.html

<ion-tabs style="margin-top:56px;">
  <ion-tab label="Images" href="(images:images)">
    <ion-router-outlet name="images"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Notes" href="/tabs/(notes:notes)">
    <ion-router-outlet name="notes"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Tasks"" href="/tabs/(tasks:tasks)">
    <ion-router-outlet name="tasks"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Answer 1

我会这样做

应用程序模块：

const routes: Routes =[
  { path: 'user-dashboard', component: UserDashboard },
  { path: '', redirectTo: 'user-dashboard', pathMatch: 'full' },
  {
    path: 'project',
    loadChildren: 'path.to.this.module#ProjectModule'
  }
];

项目模块：

const routes: Routes = [
  {
    path: '',
    component: 'ElementsPage' // If you really want the ProjectHomePage place here
  },
  {
    path: ':elementId',
    component: ElementPage
  },
  {
    path: ':categoryId/edit', // or 'edit/:categoryId'
    component: EditFormPage
  },
  {
    path: 'act',
    loadChildren: 'path.to.this.module#ActivityModule'
  }
];

活动模块：

const routes: Routes = [
  { path:'images', outlet:'images', component: ImagesPage },
  { path:'notes', outlet:'notes', component: NotesPage },
  { path:'tasks', outlet:'tasks', component: TasksPage }
];

更新：您的路线工作正常，您现在需要规划您的出口。将您的插座嵌套AppModule在您的app.component.ts中，您可以调用：

ngOnInit() {
    this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }]);
  }

您的商店将像弹出窗口一样显示在其中。有关如何操作的更多信息，请参阅主要指南。

如果您尝试在右侧添加子菜单，这是一个名为 的结构页面sidenav。我建议您将其添加到主树中并在需要时显示/隐藏。请参阅这里、这里和这里