Как правильно настроить вспомогательные маршруты в Angular 6? - PullRequest
Новая
       26

Как правильно настроить вспомогательные маршруты в Angular 6?

0 голосов
/ 28 сентября 2018

У меня проблема с маршрутизацией в Angular 6. Мое приложение имеет боковое меню с правой стороны, которое обновляется по мере того, как пользователи перемещаются по левой стороне страницы.Это боковое меню не отображается на user-dashboard, где перечислены проекты пользователей.Он должен показывать, когда пользователь выбирает проект и, таким образом, переходит к project-home.

Организацию можно увидеть на изображении ниже.Как только пользователь доберется до project-home, он должен увидеть поток мастера / детализации от elements-list до element-detail с левой стороны.Независимо от того, под activities справа, пользователь должен иметь возможность щелкать по вкладкам для images, notes и tasks.

Обновление: Вот Stackblitz, иллюстрирующий проблему: https://stackblitz.com/edit/zsoflin-routing

Я в растерянности, и был бы признателен за любые указания о том, как структурировать мои маршруты.Спасибо.-Зах

Map

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>

actions.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>

1 Ответ

0 голосов
/ 28 сентября 2018

Я бы сделал это следующим образом

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

В них ваши магазины будут отображаться как всплывающее окно.Для получения дополнительной информации о том, как это сделать, вот основное руководство .

Если вы пытаетесь добавить подменю с правой стороны, это структурная страница с именем sidenav.Я предлагаю вам добавить его в главное дерево и показывать / скрывать при необходимости.См. здесь , здесь и здесь

...