angular - 如何在 Angular 6 中正确设置辅助路由？

Question

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

组织可以在下图中看到。一旦用户到达 project-home，他们应该会在左侧看到从 elements-list 到 element-detail 的主要/详细信息流-边。独立地，在右侧的 activities 下，用户应该能够点击 images、notes 和 任务。

更新: 这是一个说明问题的 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 }
];

更新:您的路线工作正常，您现在需要布置您的 socket 。将 outlets 嵌套在 AppModule 中，并在 app.component.ts 中调用:

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

它们会像弹出窗口一样显示在您的商店中。有关如何操作的更多信息，here is the main guide .

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