Ошибка выброса углового именованного маршрутизатора-розетки

Я разрабатываю одностраничное приложение, в котором может быть несколько реактивных форм, загруженных внутри одного шаблона. Есть уникальные маршруты, которые соединяются с этими компонентами формы. Это нормально, когда отображается одна форма, а другая не отображается, поскольку только один маршрут может соответствовать компоненту одновременно.

Для упрощения рассмотрим, что есть:

  1. две ссылки маршрутизатора - "просмотр" и "редактирование"
  2. два компонента - ViewComponent и EditComponent
  3. два выхода маршрутизатора - viewOutlet и editOutlet, которые показаны рядом на странице.

При нажатии на ссылку «просмотр» ViewComponent должен быть загружен внутри viewOutlet, а при нажатии на ссылку «редактировать» EditComponent должен быть загружен внутри editOutlet. Здесь допустимо, чтобы при отображении viewComponent editOutlet был пуст, и наоборот.

Я также создал здесь stackblitz -

Предварительный просмотр - https://angular-pbyijh.stackblitz.io/app/main

Код - https://stackblitz.com/edit/angular-pbyijh

Я внес все изменения в код согласно документации. Однако я получаю сообщение об ошибке Cannot match any routes. URL Segment: 'view'

Вы можете спросить, почему я использую розетку маршрутизатора для отображения простых компонентов. Причина в том, что этот stackblitz - просто простейшая копия моего реального приложения. Компоненты в моем приложении имеют формы. Когда форма грязная и пользователь пытается от нее уйти, я буду отображать подтверждение «Вы хотите отменить изменения». Это не может быть выполнено без использования маршрутов, насколько мне известно.

Код ниже:

app.routing.module.ts

const routes: Routes = [
  {
    path:'',
    component: AppComponent
  }, {
    path:'app',
    loadChildren: './main-app/main-app.module#MainAppModule',
  }
];

main-app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'main'
  }, {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: 'view',
        component: ViewComponent,
        outlet: 'viewOutlet'
      },       {
        path: 'edit',
        component: EditComponent,
        outlet: 'editOutlet'
      }

    ]
  }
];

Сегмент выхода маршрутизатора в main-app.component.html

<div class="parent">
  <div class="block">
    <router-outlet name="viewOutlet"></router-outlet>
  </div>

  <div class="block">
    <router-outlet name="editOutlet"></router-outlet>
  </div>
</div>

angular angular-routing named-routing routerlink angular-router
person Ashwin    schedule 30.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде все кажется правильным, кроме методов навигации в компоненте

метод 1:

<a [routerLink]="[{outlets: {'viewOutlet': ['view']}}]" >Load View</a> | <a [routerLink]="[{outlets: {'editOutlet': ['edit']}}]">Load Edit</a>

удалить (щелкнуть) события. Это приведет вас к соответствующим выходам.

метод 2. Используйте это в своих методах навигации.

this.router.navigate([{ outlets: {'viewOutlet': ['view']}}],{relativeTo:this.route});
person vishwajeet kumar    schedule 30.07.2019