Angular 4延迟加载,命名路由器插座无法正常工作

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