Angular 子组件无法加载，请使用角度中的子路由

我有一个条形构件，然后在条形构件下创建一个子构件（子条形）。我也有孩子的路线。但当我使用子路由时，我的子组件找不到（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 },
];

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

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

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() {
  }

}

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.component.html：

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

child-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;
}

child-bar.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 },
];

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

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

---

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

您的路由文件错误。如果某个组件是子组件，则路由文件应如下所示

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

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以了解延迟加载是如何工作的，我希望这会有所帮助：）

如果我添加这一行：{path:''，重定向到：'child bar'，pathMatch:'full'}子栏组件将显示，而不单击子栏组件链接，这不是我想要的。我想在我们点击子栏链接后，子栏组件的显示会更好如果我添加这一行：{path:'child bar'，component:ChildBarComponent}子栏组件会在我点击子栏链接后显示，但它没有将我指向另一个视图，但子栏组件显示在子栏组件的底部，但事实并非如此correct@CodeContributor在正常情况下，我们会自动打开一个子组件。如果不想加载重定向到，请将其删除。若您想重定向到新视图，那个么为什么要将其创建为子组件呢。使其成为一个单独的组件。检查你的html设计在你想要的地方，并通过查看更多的信息如何路由工程在角