我在导航到延迟加载模块中定义的组件时遇到问题。 组件
ListComponent
定义在路径 test
下(my-routing.module.ts - 延迟加载模块)。每当我单击 Test
按钮 (test.component.html) 时,我都会收到异常 NG04002: Cannot match any routes. URL Segment: 'test'.
为什么?
我的 app-routing.module.ts 看起来像这样:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';
import { ListComponent } from './list.component';
import { TestComponent } from './test/test.component';
const myModule = () => import('./my-routing/my-.module').then(x => x.MyRoutingModule);
const routes: Routes = [
{ path: '', component: TestComponent },
{ path: 'experiment', loadChildren: myModule },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我的 my-routing.module.ts 是:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from '../list.component';
import { TestComponent } from '../test/test.component';
const routes: Routes = [
{ path: 'test', component: ListComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule { }
我的 test.component.html 看起来像这样:
<div class="container">
<div class="row">
<div class="col-1">
<a [routerLink]="['test']"><button type="button" class="btn btn-primary">
Test</button></a>
</div>
</div>
</div>
如果您阅读了您的 app.routing.ts,
{ path: 'experiment', loadChildren: myModule },
MyRoutingModule
中的所有路线都将以路径:“/experiment”开头
因此,将路径“test”更改为“experiment/test”。
<a [routerLink]="['experiment/test']">
<button type="button" class="btn btn-primary">
Test
</button>
</a>
请注意,您可以将
[routerLink]
属性应用于 <button>
元素,而不需要 <a>
元素。
<button type="button" class="btn btn-primary" [routerLink]="['experiment/test']">
Test
</button>