我正在尝试使用命名导航到延迟加载模块中定义的组件router-outlet
。当我单击“测试”按钮(test.component.html)时,出现异常:
NG04002:无法匹配任何路由。URL 段:“测试”。
我的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-routing.module').then(x => x.MyRoutingModule);
const routes: Routes = [
{ path: '', component: TestComponent },
{ path: 'experiment', loadChildren: myModule },
{
path: 'home',
component: HomeComponent, outlet: "outlet1"
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我的test.component.html看起来像这样:
<div class="container">
<div class="row">
<div class="col-2">
<a [routerLink]="[{ outlets:{ outlet1: ['home'] }}]" routerLinkActive="active"><button type="button" class="btn btn-primary">
Home</button></a>
</div>
<div class="col-1">
<a [routerLink]="[{ outlets:{ outlet1: ['experiment','test'] }}]"><button type="button" class="btn btn-primary">
Test</button></a>
</div>
</div>
</div>
我的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, outlet: "outlet1" },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule { }
[routerLink]
如下更改辅助路线。演示@StackBlitz