Angular 6+ вспомогательные маршруты не работают, когда первичный принимает параметр - PullRequest
Новая
       12

Angular 6+ вспомогательные маршруты не работают, когда первичный принимает параметр

0 голосов
/ 16 октября 2018

Проблема:

Вспомогательный маршрут не работает.Angular показывает следующую ошибку в консоли при маршруте к вспомогательному маршруту: 

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'transformation'
Error: Cannot match any routes. URL Segment: 'transformation'

Код:

Проект состоит из следующих модулей

  1. app.module

  2. app-routing.module

  3. home.module

  4. home-routing.module

Приложение Модуль маршрутизации 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ApplicationsComponent } from './applications/applications.component';

const routes: Routes = [
  { path: '', redirectTo: '/applications', pathMatch: 'full' },
  {
    path: 'applications',
    component: ApplicationsComponent
  },
  {
    path: 'home/:id',
    loadChildren: './home/home.module#HomeModule'
    // canActivate: [AuthGuard],
  },
  { path: '**', redirectTo: '/applications' },
];

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

Модуль домашней маршрутизации 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { TransformationMatricesComponent } from './transformation-matrices/transformation-matrices.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'transformation',
    component: TransformationMatricesComponent,
    outlet: 'pane'
  }
];

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

Компонент приложения 

<app-top-menu></app-top-menu>
<router-outlet></router-outlet>

Домашний компонент 

<div class="home-nav">
  <ul class="nav nav-right">
    <li class="nav-item">
      <a class="nav-link active"
         [routerLink]="['', {outlets: { pane: ['transformation'] }}]"
         routerLinkActive="active">Transformation</a>
    </li>
  </ul>
</div>
<div class="content-container">
  <router-outlet name="pane"></router-outlet>
</div>

До сих пор мое расследование:

Я не нашел ни одного примера, где основной маршрут имеет параметр запроса, поэтому я не уверен, возможно ли это.В моем примере выше параметр запроса необходим для перехода в правильное состояние и должен храниться в URL.

...