Question

我正在尝试在angular2组件上设置childroutes

    import { Component, OnInit } from '@angular/core';
    import { RouterModule, Routes} from '@angular/router';
    import { Prueba2Component } from '../prueba2/prueba2.component';
    import { Prueba3Component } from '../prueba3/prueba3.component';

this is the component  
    @Component({
      selector: 'app-prueba',
      templateUrl: './prueba.component.html',
      styleUrls: ['./prueba.component.css']
    })
    export class PruebaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

export const childRoutes: Routes = [
  { path:'prueba2', component:Prueba2Component },
  { path:'prueba3', component:Prueba3Component }
];

这是模板

<p>
  prueba works!
</p>
<div>
  <ul>
    <li><a [routerLink]="['./prueba2']" >Prueba2</a></li>
    <li><a [routerLink]="['./prueba3']" >Prueba3</a></li>
  </ul>
</div>
<router-outlet></router-outlet>

我正在学习角度，我想我错过了如何对childRoutes数组，这是我得到的错误

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'prueba/prueba2'

修改

现在这是app.component.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes} from '@angular/router';

import { AppComponent } from './app.component';
import { CronoComponent } from './crono/crono.component';
import { ClockFactory } from './classes/clockFactory';
import { PruebaComponent } from './prueba/prueba.component';
import { Prueba2Component } from './prueba2/prueba2.component';
import { Prueba3Component } from './prueba3/prueba3.component';



 export const childRoutes: Routes = [
  { path:'', redirectTo:'prueba2', pathMatch: 'full'},
  { path:'prueba2', component:Prueba2Component },
  { path:'prueba3', component:Prueba3Component }
];
const routes: Routes = [
  { path:'crono', component:CronoComponent },
  { path:'prueba', component:PruebaComponent },
  { path:'', redirectTo:'/crono', pathMatch: 'full'},
  {children: childRoutes}
];


@NgModule({
  declarations: [
    AppComponent,
    CronoComponent,
    PruebaComponent,
    Prueba2Component,
    Prueba3Component
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  providers: [ClockFactory],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在我发现了这个错误

 Error: Invalid configuration of route '': routes must have either a path or a matcher specified

Answer 1

根据错误：URL Segment: 'prueba/prueba2'我猜你在某处定义了prueba路由。您需要在其下添加您的子路线：

const routes: Routes = [
  { path:'crono', component:CronoComponent },
  { path:'prueba', component:PruebaComponent, children: childRoutes },
                                              ^^^^^^^^^^^^^ <------------------
  { path:'', redirectTo:'/crono', pathMatch: 'full'},
];

在angular2上设置ChildRoutes

1 个答案: