Angular 4 Lazy loading with named router-outlet 不起作用答案

【问题标题】：Angular 4 Lazy loading with named router-outlet not workingAngular 4 Lazy loading with named router-outlet 不起作用
【发布时间】：2018-05-08 23:56:21
【问题描述】：

我遇到了延迟加载问题，不打算路由到指定的路由器插座。有人可以看看我错的地方吗？我有一个主页，其中有指向产品 -> 默认路由器插座和产品详细信息 -> 命名路由器插座的链接。

  <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

【问题讨论】：

标签： angular lazy-loading

【解决方案1】：

这是已知的bug，你可以跟踪问题here

解决方法或我们可以说解决此问题的方法是，在顶部使用非空路径如果在延迟加载的模块中存在辅助（即命名）路由，则为级别路由。

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

MainRoutingModule：顶级非空路径（即“路径：'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]="[{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 {}

登录组件：

使用 [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 {}

}

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

【讨论】：

感谢您指出这是一个错误。再次感谢您修复代码。希望这对其他人有帮助。
引用的问题已关闭。你现在可以在这里追踪它github.com/angular/angular/issues/12842
我正在尝试启动并运行 Nativscript-angular 应用程序，这只是为我解决了有关路由的问题。谢谢！
@mohit-uprim 我在我的应用程序中嵌套了延迟加载模块，并试图通过命名路由器路由到另一个组件内的延迟模块，我该如何更改我的路由配置以允许这样做?我在这里有我的演示代码stackblitz.com/edit/…

【解决方案2】：

假设路由是 profile ProfileComponent (example.com/profile) 的一部分

profile.component.ts

<a routerLink="/profile/about">About</a>
<a routerLink="/profile/edit">Edit</a>
<a routerLink="/profile/settings">Settings</a>
<router-outlet></router-outlet>

共有三个不同的组件：

关于组件
编辑组件
设置组件

然后路线将如下所示：

{
    path: 'profile',
    component: ProfileComponent,
    children: [
        {
            path: 'about',
            component: AboutComponent
        },
        {
            path: 'edit',
            component: EditComponent
        },
        {
            path: 'settings',
            component: SettingsComponent
        }
    ]
}

【讨论】：

如果我们有 3 个不同的模块而不是组件怎么办？我有一个登录名和另外 3 个路由，它们是延迟加载的模块，每个模块中有近 5 个子模块，那么它如何更改出口调用，因为我们无法将出口参数添加到延迟加载的路由并且所有子文件夹都在同一个根级别是 app 文件夹，那么这个怎么实现呢？
我的路由是这样的：``` { path: "", canActivate: [AuthGuard], loadChildren: "./login/login.module#LoginModule" }, { path: "login" , loadChildren: "./login/login.module#LoginModule" }, { path: "home", loadChildren: "./home/home.module#HomeModule" }, { path: "message", loadChildren: "./ message/message.module#MessageModule" }, { path: "newConversation", loadChildren: "./newConversation/newConversation.module#NewConversationModule" }, { path: "account", loadChildren: "./account/account.module# AccountModule" }, ```我们如何准确地调用命名的插座？
嘿@LuisParada 请检查这个答案，如果它可以帮助stackoverflow.com/questions/41857876/…
但这不是延迟加载

【解决方案3】：

通过避免空路径“”来解决问题的solution。感谢Domenic Helfenstein 的礼貌，他花时间重现了问题here。

【讨论】：