带有命名路由器出口的Angular 4延迟加载不起作用 [英] Angular 4 Lazy loading with named router-outlet not working

问题描述

我有一个延迟加载问题，它不会路由到命名路由器出口.谁能看错我的地方?我在主页上有一个指向产品->默认路由器出口和产品详细信息->命名路由器出口的链接.

I have a problem with lazy loading not about to route to a named router-outlet. Can someone look at where I when wrong? I have a mainpage where there is a link to Product -> default router outlet and Product Detail -> named router outlet.

  <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>

下面是插入代码.

柱塞代码

推荐答案

这是已知的错误，您可以跟踪问题

This is known bug, you can track the issue 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.

我唯一看到的缺陷是，在路由中添加了一个额外的网址段

The only flaw I can see is, an additional url segment added in routes

MainRoutingModule:顶级非空路径(即路径:'负载'")

MainRoutingModule: Top level non-empty path(i.e. "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:使用辅助路由的正确语法.

MainpageComponent:The correct syntax to use the secondary routes.

[routerLink] ="[{outlets:{detail:['productdetail']}}]]"

[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:

LoginComponent:

使用[routerLink] ="['mainpage/load']"加载主模块.

Use [routerLink]="['mainpage/load']" to load the main module.

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 {}

}

演示: https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRRhh?p=preview

这篇关于带有命名路由器出口的Angular 4延迟加载不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！