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

时间:2017-11-25 02:57:08

标签: angular lazy-loading

我有一个延迟加载的问题,而不是要路由到指定的路由器插座。有人可以看看我错在哪里吗?我有一个主页,其中有一个指向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

3 个答案:

答案 0 :(得分:9)

这是已知错误,您可以跟踪问题here

  

解决方法或者我们可以说解决这个问题的方法是,为您的top使用非空路径   如果在延迟加载的模块中存在辅助(即命名)路由,则为级别路由。

我能看到的唯一缺陷是,路线中添加了额外的网址

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] = “[{网点:{细节:[ '产品详情']}}]”

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:

  

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

答案 1 :(得分:0)

比方说,路线是 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>

共有三个不同的组件:

  • AboutComponent
  • EditComponent
  • SettingsComponent

然后,路线将如下所示:

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

答案 2 :(得分:0)

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