Angular2-crumbs and lazy loading component

내 프로젝트에 Angular2-crumbs과 lazy loader components을 사용하려고합니다. 어떻게 든 빵 부스러기가 잘 작동하지만 내 게으른 로더 구성 요소는로드되지 않고 console에도 오류가 발생하지 않습니다.Angular2-crumbs and lazy loading component

Angular2-crumbs code에서 알 수 있듯이 어린이 구성 요소에서만 작동합니다. 내 요구 사항은 게으른 로딩을 사용하기 때문에 내가 한 일은 app에서 root으로 리다이렉션하고있다. 여기서 나는 모든 게으른 로딩 컴포넌트를 root 컴포넌트 아래에 가지고있다.

app.routing.modules.ts

export const routes: Routes = [ 
{path: '', redirectTo: 'root', pathMatch: 'full'} 
]; 

@NgModule({ 
imports: [RouterModule.forRoot(routes)], 
exports: [RouterModule] 
}) 
export class AppRoutingModule { 
}

app.module.ts

@NgModule({ 
declarations: [ 
    AppComponent 
], 
imports: [ 
    CoreModule, 
    BrowserModule, 
    BrowserAnimationsModule, 
    RouterModule.forRoot(routes) 
] 
providers: [] 
bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

응용 프로그램 :

내 코드의 배열

은 아래와 같습니다. component.ts

,515,

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
}

app.component.html

<router-outlet></router-outlet>

루트 routing.module.ts

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: '', component: RootComponent, children: [ 
     { path: '', component: HomeComponent }, 
     { 
      path: 'screen/home', component: HomeComponent, data: { breadcrumb: 'Home' }, children:[ 
      { path: 'orders', loadChildren: './../app/orders/module#Module', data: { breadcrumb: 'Order management'} }, 
      { path: 'stocks', loadChildren: './../app/stocks/module#Module', data: { breadcrumb: 'Stock management' } }, 
     ] 
     } 
    ]} 

    ]) 
], 
exports: [ RouterModule ] 
}) 

export class RootRoutingModule {}

root.module.ts

@NgModule({ 
      declarations: [ 
       HomeComponent, 
       RedirectComponent, 
       RootComponent 
      ], 
      imports: [ 
       CoreModule, 
       BrowserModule, 
       BrowserAnimationsModule, 
       BreadcrumbModule.forRoot(), 
       HttpClientModule, 
       RootRoutingModule 
      ], 
      providers: [ 
       BannerService, 
       BlockService, 
       CanDeactivateGuard, 
       ConfirmationService, 
       CoreService, 
       GenericService, 
       HttpClient, 
       MessageService, 
       RedirectComponent, 
      ] 
     }) 
     export class RootModule { 
     }

root.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'root', 
    templateUrl: 'src/root/root.component.html', 
    styleUrls: ['src/root/root.component.css'] 
}) 
export class RootComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

}

root.component.html 그래서 어떻게 해결하는 단서가없는 Angular2-crumb repo에 제공되는 추가 문서가 없습니다

<breadcrumb></breadcrumb> 
<router-outlet></router-outlet>

이 문제.

누구든지 나를 도와 줄 수 있다면 미리 감사드립니다.

감사합니다 !!!

출처

2017-10-12 tutorialfeed

나는 아래 루트 routing.modules.ts에 약간의 변경을 수행하여이 문제를 해결할 수 있습니다

루트 routing.modules.ts

@NgModule({ imports: [ RouterModule.forChild([ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'screen/home', component: RootComponent, data: { breadcrumb: 'Home' }, children: [ { path: 'orders', loadChildren: './../app/orders/module#Module', data: { breadcrumb: 'Order management'} }, { path: 'stocks', loadChildren: './../app/stocks/module#Module', data: { breadcrumb: 'Stock management' } }, ]} ]) ], exports: [ RouterModule ] }) export class RootRoutingModule {}

을 그래서를 확인 후 내 결론 Angular2-crumbs 코드는 첫 번째 하위 구성 요소와 함께 작동합니다.

출처

2017-10-12 11:17:47 tutorialfeed

Angular2-crumbs and lazy loading component

답변

관련 문제