Question

问题：

辅助路线无效。当路由到辅助路由时，Angular在控制台中显示以下错误：

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

代码：

项目由以下模块组成

app.module
app-routing.module
home.module
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中。

当主要参数获取参数时，Angular 6+辅助路线不起作用

0 个答案: