Перенаправить издание / создание в другой модуль Angular - PullRequest
Новая
       51

Перенаправить издание / создание в другой модуль Angular

0 голосов
/ 26 марта 2020

Здравствуйте, мне интересно, если мой подход хорош. У меня есть app-компонент, где я использую материал mat-sidenav. Я использую 2 роутера здесь. Один из них предназначен для перемещения по приложению, а второй - для открытия моего sidenav для моделей издания или создания. 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav class="sidenav" #sidenav [opened]="openSidebar" position="end">
    <router-outlet name="side" (activate)="openSidebar=true" (deactivate)="openSidebar = false"></router-outlet>
  </mat-sidenav>
  <mat-sidenav-content class="sidenav-content">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Модуль маршрутизации моего приложения: 

const routes: Routes = [
  { path: '', component: WelcomeComponent },
  { path: 'teams', loadChildren: () => import('./teams/teams.module').then(m => m.TeamsModule) },
  { path: "sidenav", outlet: "side", loadChildren: () => import("./sidenav/sidenav-routing.module").then(m => m.SidenavRoutingModule) },
];

Когда я в команде модуль в Компоненте, где я показываю все команды, я могу нажать кнопку «Редактировать команду», чтобы затем открыть «боковую» розетку в моем модуле приложения, которая открывает мой sidenav: 

this.router.navigate([{ outlets: { "side": ['sidenav', `teams`] } }], { relativeTo: this.activatedRoute.root })

Затем sidenav имеет дело с модулем sidenav-routing 

const routes: Routes = [
  {
    path: "teams",
    component: BasicSidenavPanelComponent,
    children: [
      { path: "", redirectTo: "add" },
      { path: "add", component: AddTeamComponent },
      { path: "edit", component: EditTeamComponent}
    ]
  }
];

Этот подход приносит мне некоторые проблемы, поэтому мне интересно, если это правильное решение. Кроме того, обычно редактирование выполняется в дочерних элементах пути, и здесь редактирование происходит в совершенно другом месте. Раньше у каждого «основного» компонента в каждом модуле был свой sidenav, и вот так: (Модуль Teams ранее) 

const routes: Routes = [
  { 
    path: '', component: TeamsComponent, canActivate: [AuthGuard],
    children: [
      { path: 'create', outlet: 'side', component: AddTeamComponent },
      { path: 'edit', outlet: 'side', component: EditTeamComponent},
    ]
  },

Но это было проблематично c также потому, что каждый «основной» компонент должен быть mat-sidenav материал. Не могли бы вы дать мне какие-нибудь идеи, каким образом я должен это сделать? Заранее спасибо

...