Вспомогательный маршрут Angular 4 не работает должным образом

У меня есть приложение, в котором есть один компонент входа в систему и домашний модуль. Я хочу иметь дополнительный маршрут внутри домашнего модуля.

Как только пользователь входит в систему, я перенаправляюсь на домашний маршрут.

Это мой app-routing.module

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Ниже мой home-routing.module.ts

const routes: Routes = [
    {
        path: 'home',
        children: [
            {
                path: '',
                component: HomeComponent,
                canActivate: [CanActivateGuard]
            },
            {
                path: '',
                outlet: 'aux',
                component: DashboardComponent,
                canActivate: [CanActivateGuard]
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

Я ожидаю, что когда приложение будет перенаправлено на домашний маршрут this.router.navigate(['/home']);, тогда должны быть отрисованы оба компонента HomeComponent (который сейчас отрисовывается) и DashboardComponent (который не отрисовывается)

Я пробовал всевозможные хаки, такие как предоставление пути к компоненту, который необходимо отобразить внутри маршрута aux на «панель управления» и из метода ngOnInit домашнего компонента, пытающегося перенаправить на маршрут панели мониторинга this.router.navigate([{ outlets: { aux: 'dashboard' }}]);

Но наблюдение, похоже, работает. Что я делаю не так?


angular angular-router
person Abhishek Prakash    schedule 23.06.2017    source источник
comment
ПРИМЕЧАНИЕ. Когда Angular обрабатывает маршруты, он использует первый найденный. Он не будет обрабатывать несколько маршрутов с одним и тем же путем. В приведенных выше маршрутах вы определили два с пустым путем. Он всегда будет выбирать только первый.   -  person DeborahK    schedule 23.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Синтаксис для активации как основного маршрута, так и дополнительного (вспомогательного) маршрута выглядит следующим образом:

this.router.navigate(['/home', { outlets: { aux: 'dashboard' }}]);

Однако, насколько мне известно, в маршрутизации все еще есть ошибка, и этот синтаксис не работает. (По крайней мере, у меня этого не было около 2 месяцев назад, когда я попробовал.)

Вместо этого мне пришлось использовать такой синтаксис:

this.router.navigate([{ outlets: { 
                           primary: ['/home'], 
                           aux: ['dashboard'] 
}}]);

Этот синтаксис в основном обрабатывает оба маршрута как именованные маршруты и использует определенное в Angular имя для основного маршрута («primary»). Вам не нужно изменять конфигурацию маршрута, чтобы это работало.

person DeborahK    schedule 23.06.2017
comment
Вместо this.router.navigate(['/home']); я попробовал вышеупомянутый синтаксис, но он не работает :( Я получаю эту ошибку - ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%2Fhome' - person Abhishek Prakash; 23.06.2017
comment
и когда я попробовал this.router.navigate([{ outlets: { primary: ['home'], aux: ['dashboard']}}]);, я получил следующую ошибку - Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard' - person Abhishek Prakash; 23.06.2017
comment
Похоже, у вас нет маршрута на приборной панели. Здесь у вас может быть несколько проблем. Попробуйте изменить путь маршрута панели управления с "" на "панель управления". - person DeborahK; 23.06.2017
comment
Если вам нужна дополнительная информация о том, как работать с маршрутами, рассмотрите этот курс: app.pluralsight.com/library/courses/ - person DeborahK; 23.06.2017
comment
Я изменил путь с «» на «панель управления» (я не упомянул об этом в своем предыдущем комментарии). - person Abhishek Prakash; 23.06.2017
comment
Можете ли вы сделать плункер, демонстрирующий ваши проблемы? - person DeborahK; 23.06.2017