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

我会这样

AppModule：

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

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'
  }
];

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'] } }]);
  }

您的商店将像弹出窗口一样显示。有关如何操作的更多信息，请here is the main guide。

如果您尝试在右侧添加子菜单，则此结构页面称为sidenav。我建议您将其添加到主树中，并在需要时显示/隐藏。参见here，here和here

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

1 个答案: