我有一个延迟加载的问题,而不是路由到指定的路由器插座.有人可以看看我错在哪里吗？我有一个主页,其中有一个指向Product的产品 – >默认路由器插座和产品详细信息 – >命名路由器插座.
<div>
<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
<div> <router-outlet></router-outlet></div>
<div> <router-outlet name="detail"></router-outlet>
</div>
以下是plunker代码.
Plunker Code
这是已知的bug,你可以跟踪问题
here
The workaround or we can say solution to this issue is,use non-empty paths for your top
level routes if auxilary(i.e. named) routes exist in a lazy loaded module.
我能看到的唯一缺陷是,在路线中增加了一个额外的网址段
MainRoutingModule：顶级非空路径(即“路径：’加载’”)
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]=”[{outlets:{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 {}
LoginComponent：
Use [routerLink]=”[‘mainpage/load’]” to load the main module.
import { Component,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 {}
}
演示：https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview