我正在try 导航到使用名为router-outlet的延迟加载模块中定义的组件.当我点击测试按钮(test.component.html)时,我得到一个异常:

NG04002:无法匹配任何路由.URL段:‘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 { }

推荐答案

将你的[routerLink]换成auxiliary route,如下所示.

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

Demo @ StackBlitz

Typescript相关问答推荐

之间是否有区别:例如useEffect()React.useEffect()

具有条件通用props 的react 类型脚本组件错误地推断类型

如何获取数组所有可能的索引作为数字联合类型?

APP_INITIALIZER—TypeError:appInits不是函数

在类型内部使用泛型类型时,不能使用其他字符串索引

JS Redux Devtools扩展不工作

如何在函数参数中使用(或模仿)`success`的行为?

部分类型化非 struct 化对象参数

类型,其中一条记录为字符串,其他记录为指定的

如何将泛型对象作为返回类型添加到类型脚本中

笛卡尔产品类型

对象类型的TypeScrip隐式索引签名

跟踪深度路径时按条件提取嵌套类型

类型脚本-在调用期间解析函数参数类型

使用Cypress测试从Reaction受控列表中删除项目

顶点堆叠的图表条形图未在正确的x轴上显示

换行TypeScript';s具有泛型类型的推断数据类型

Karma Angular Unit测试如何创建未解析的promise并在单个测试中解决它,以判断当时的代码是否只在解决后运行

从泛型对象数组构造映射类型

如何强制对象数组中的对象属性具有非空字符串值?