Question

我想在子级页面的路由器名称zebra中显示Zebra1Component，Zebra2Component和Zebra3Component组件。但是我收到以下错误：

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'children'
Error: Cannot match any routes. URL Segment: 'children'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)

routing.module.ts ：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../home/home.component';
import { ParentComponent } from '../parent/parent.component';
import { Child1Component } from '../child1/child1.component';
import { Child2Component } from '../child2/child2.component';
import { AComponent } from '../a/a.component';
import { BComponent } from '../b/b.component';
import { CComponent } from '../c/c.component';
import { DComponent } from '../d/d.component';
import { ChildrenComponent } from '../children/children.component';
import { Zebra1Component } from '../zebra1/zebra1.component';



const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'zebra_1', component: Zebra1Component, outlet: 'zebra' },
  { path: 'zebra_2', component: Zebra1Component, outlet: 'zebra' },
  { path: 'zebra_3', component: Zebra1Component },
  { path: 'children', component: ChildrenComponent , children: [
    { 
      path: 'c', 
      component: CComponent, 
      outlet:"neutral" , 
    },
    { 
      path: 'd', 
      component: DComponent, 
      outlet:"neutral" , 
    }
  ]},
  { path: 'parent', component: ParentComponent, children: [
    { path: 'child_1', component: Child1Component, outlet: 'children' },
    { path: 'child_2', component: Child2Component, outlet: 'children' },
    { path: 'a', component: AComponent, outlet: 'letters' }, 
    { path: 'b', component: BComponent, outlet: 'letters' }
  ] }
];

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

children.component.html

<h1>Children Page</h1>
<hr>

<h2>Does not Work</h2>
<button 
  [routerLink]="[{outlets: {'zebra': ['zebra_1']}}]">
  zebra_1
</button>
<button 
  [routerLink]="[ {outlets: {'zebra': ['zebra_2']}}]">
  zebra_2
</button>

<router-outlet name="zebra"></router-outlet>

子页面的网址为 http://localhost:4200/children
帮助将不胜感激。

Angular 6中的辅助路由不显示路由器出口中的内容

0 个答案: