这是已知错误,您可以跟踪问题here https://github.com/angular/angular/issues/10981#issuecomment-301787482
解决方法或者我们可以说解决此问题的方法是,为您的顶部使用非空路径
如果延迟加载模块中存在辅助(即命名)路由,则为级别路由。
我能看到的唯一缺陷是,在路由中添加了一个额外的 url 段
MainRoutingModule:顶级非空路径(即“path:'load'”)
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainpageComponent } from './mainpage.component';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './productdetail.component';
const childroutes: Routes = [
{ path: 'load', component: MainpageComponent ,
children: [
{path: 'product', component: ProductComponent
{path: 'productdetail', component: ProductDetailComponent,
outlet: 'detail'
},
]
},
];
export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);
const newLocal: NgModule = {
imports: [RouterModule.forChild(childroutes) ],
exports: [RouterModule, ],
declarations: []
};
@NgModule(newLocal)
export class MainRoutingModule { }
MainpageComponent:使用辅助路由的正确语法。
[routerLink]="[{出口:{detail:['productdetail']}}]"
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-main',
template: `
<div>
<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div>
<div> <router-outlet></router-outlet></div>
<div> <router-outlet name="detail"></router-outlet>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class MainpageComponent {}
登录组件:
使用 [routerLink]="['mainpage/load']" 加载主模块。
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-login',
template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`,
})
export class LoginComponent implements Oninit, OnDestroy {
constructor() {}
ngOnInit(): void {}
}
Demo:https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview