子组件无法加载使用儿童路径角

Question

我有一个酒吧组件，然后我在酒吧组件下创建一个子组件（子栏）。我也有孩子的路线。但是当我使用子路由时，我的子组件找不到（404）。

app.routes.ts：

import { Routes } from '@angular/router'; 
import { HomeComponent } from './home'; 
import { AboutComponent } from './about'; 
import { BarComponent } from './bar/bar.component'; 
import { NoContentComponent } from './no-content'; 

import { DataResolver } from './app.resolver'; 

export const ROUTES: Routes = [ 
    { path: '',  component: HomeComponent }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', component: BarComponent}, 
    { path: 'detail', loadChildren: './+detail#DetailModule'}, 
    { path: 'barrel', loadChildren: './+barrel#BarrelModule'}, 
    { path: '**', component: NoContentComponent }, 
]; 

bar.component.ts：

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

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

    constructor() { } 

    ngOnInit() { 
    } 

} 

bar.component.html：

<p> 
    bar works! 
</p> 
<span> 
     <a [routerLink]=" ['./child-bar'] "> 
     Child Bar 
     </a> 
    </span> 
<router-outlet></router-outlet> 

儿童bar.component.ts ：

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

@Component({ 
    selector: 'child-bar', 
    templateUrl: './child-bar.component.html', 
    styleUrls: ['./child-bar.component.css'] 
}) 
export class ChildBarComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    console.log('hello `ChildBar` component'); 
    } 

} 

儿童bar.module.ts：

import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { routes } from './child-bar.routes'; 
import { ChildBarComponent } from './child-bar.component'; 

console.log('`ChildBar` bundle loaded asynchronously'); 

@NgModule({ 
    declarations: [ 
    /** 
    * Components/Directives/ Pipes 
    */ 
    ChildBarComponent, 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild(routes), 
    ], 
}) 
export class ChildBarModule { 
    public static routes = routes; 
} 

儿童bar.routes.ts：

import { ChildBarComponent } from './child-bar.component'; 

export const routes = [ 
    { path: '', component: ChildBarComponent, pathMatch: 'full' }, 
]; 

请让我知道如果你需要更多的文件，我可以将它。谢谢。

Answer 1

你的路由文件是错误的，如果事情是一个组件的子然后路由文件应该是这样的

在正常的路由的情况下，没有延迟加载

export const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', component: BarComponent, 
    children: [ 
     { path: '', redirectTo: 'child-bar', pathMatch: 'full' }, 
     { path: 'child-bar', component: ChildBarComponent } 
    ] 
    } 
]; 

，如果你想延迟加载你可以尝试这两种方式

1）

{ path: 'bar', component: BarComponent, 
     children: [ 
      { path: '', redirectTo: 'child-bar', pathMatch: 'full' }, 
      { path: 'child-bar', loadChildren: 'childbar/childbar.module#ChildBarModule' } 
     ] 
    } 

2）移动与子组件的完整栏组件在不同的模块有自己的路由表

export const routes: Routes = [ 
    { path: '', redirectTo: 'product-list', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', loadChildren: 'bar/bar.module#LazyModule' } 
    } 
]; 

检查这个plnkr了解装载如何偷懒工作https://plnkr.co/edit/vpCqRHDAj7V6mlN1AknN?p=preview我希望这将有助于:)