Question

好的我这里有一个奇怪的情况。也许我正在推挤筑巢太远但是让我们看看。

我有一堆模块看起来像： AppModule - ＆gt; QuoteModule - ＆gt; CarModule

加载了AppModule和QuoteModule，CarModule是延迟加载的。

现在在AppModule路由中，我有这个：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { QuoteComponent } from '@modules/quote/components/quote/quote.component';

const routes: Routes = [
    { path: 'quote', component: QuoteComponent },
    { path: 'maintenance', loadChildren: 'app/modules/maintenance/maintenance.module#MaintenanceModule' },
    { path: 'error', loadChildren: 'app/modules/errors/errors.module#ErrorsModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这条路线很好。在点击/引用时加载QuoteComponent

在我的报价模块中，我有这个路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { QuoteComponent } from '@modules/quote/components/quote/quote.component';

const routes: Routes = [
    { path: '', component: QuoteComponent, children: [
        { path: 'quote/car', loadChildren: 'app/modules/quote/car/car.module#CarModule'}
    ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class QuoteRoutingModule { }

这很好用，当点击/引用/开车时，我懒得加载汽车模块并点击CarModule路由的空白路径，即：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CarInfoComponent } from '@modules/quote/car/components/car-info/car-info.component';

const routes: Routes = [
    { path: '', children: [
        { path: 'quote/car/info', component: CarInfoComponent, outlet: 'quote'}
    ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CarRoutingModule { }

我的问题是我的汽车模块将在子路线中分开，如：报价/汽车/信息，报价/汽车/颜色，报价/汽车/某事......

当我点击quote / car / info时，我收到此错误：Error: Cannot match any routes. URL Segment: 'quote/car/info'

修改我的CarModule看起来像这样：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CarRoutingModule } from './car-routing.module';
import { CarInfoComponent } from './components/car-info/car-info.component';

@NgModule({
    imports: [
        CommonModule,
        CarRoutingModule
    ],
    declarations: [CarInfoComponent],
    exports: [CarInfoComponent]
})
export class CarModule { }

我错过了什么吗？

Answer 1

知道了。作为参考，这是我如何解决它：

在我的AppComponent中，我有<router-outlet>来加载QuoteComponent，在QuoteComponent内，我有一个<router-outlet name="quote">，其中我试图加载{{1}的子路径}}

我刚刚从QuoteComponent的路由器插座中移除了CarComponent，并且所有对儿童路线中的报价插座的引用都有效。

我很难说我必须确定子插座，但显然在插座中存在泡沫效应。子级路由将加载到层次结构的第一个父级出口中。

我希望它有助于某人。

在延迟加载的子模块中找不到路由

1 个答案: