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

Posted 2023-02-22

【中文标题】Angular 4 Lazy loading with named router-outlet 不起作用

【英文标题】：Angular 4 Lazy loading with named router-outlet not working

【发布时间】：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

【参考方案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 请检查这个答案，如果它可以帮助***.com/questions/41857876/…

但这不是延迟加载

【参考方案3】：

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