routerLink 不会导航到指定路由器出口的延迟加载模块

Question

我正在尝试使用名为

outlet-router

导航到延迟加载模块中定义的组件。当我单击

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-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 { }

Answer 1

将您的

[routerLink]

更改为辅助路线。

<a [routerLink]="['experiment', { outlets:{ outlet1: ['test'] }}]">
    <button type="button" class="btn btn-primary">
        Test
    </button>
</a>

演示@StackBlitz