子組件無法加載使用兒童路徑角

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我希望這將有助於:)