javascript - 错误 : Uncaught (in promise): Error: Cannot match any routes RC4 Child Routes

Question

在 Angular 应用程序中实现子路由的演示应用程序
Angular 2 应用程序显示错误

 Error: Uncaught (in promise): Error: Cannot match any routes: 'movie-home'
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'movie-home' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'movie-home'(…)

如果我不从文件 movie.routes.ts 添加这些代码行，应用程序工作正常

{
    path:'movie-home',
    component:HomeComponent,
    //Remove this block of code- Start
    children:[
        {path : 'animation' , component:AnimationComponent},
        {path : 'action' , component:ActionComponent}
    ]**
    //Remove this block of code.- End
}

我已经在 GITHUB 上推送了代码
克隆 -- https://github.com/Sandeep3005/Angular101.git
查看 -- https://github.com/Sandeep3005/Angular101

文件结构为
应用
|--app.component.ts
|--app.routes.ts
|--main.ts
|--电影中心
|--home.component.ts
|--movie.routes.ts
|-- Action
|--action.component.ts
|--动画
|--animation.component.ts

文件如下
app.component.ts

import {Component} from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';

@Component({
    selector: 'my-app',
    template: `
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import { MovieRoutes } from './MovieCenter/movie.routes';

export const routes: RouterConfig = [
 ...MovieRoutes,
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
];

ma​​in.ts

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent,[
    APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

MovieCenter/home.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';

@Component({
    template:`
    <div class="col-md-3" style="background:#8FDF98;height:100%">
        <br><br><br>
        <a [routerLink]="['/movie-home']" >Home Component</a><br>
        <a [routerLink]="['/animation']" >Animation Component</a><br>
        <a [routerLink]="['/action']" >Action Component</a>
     </div>   
    <div class="col-md-9">
        Child Component Display Section
        <hr>
        <router-outlet></router-outlet>
     </div>
    `,
    directives:[ROUTER_DIRECTIVES]
})

export class HomeComponent{
}

MovieCenter/movie.routes.ts

import { RouterConfig } from '@angular/router';
import { HomeComponent } from './home.component';
import { AnimationComponent } from './Animation/animation.component';
import { ActionComponent } from './Action/action.component';

export const MovieRoutes: RouterConfig = [
    {
        path : '',
        redirectTo:'/movie-home',
        pathMatch : 'full'
    },
    {
        path:'movie-home',
        component:HomeComponent,
        children:[
            {path : 'animation' , component:AnimationComponent},
            {path : 'action' , component:ActionComponent}
        ]
    }
]

还有其他文件
MovieCenter/Action/action.component.tsMovieCenter/Animation/animation.component.ts

这两个文件都是一个简单的组件，模板显示组件的名称

模板: Action 组件

Answer 1

当你的路由配置设置如下时

{
  path:'movie-home',
  component:HomeComponent
}

Angular 只解释一条路径，即 movie-home，因此一切正常

现在，当您将配置更改为此

{
  path:'movie-home',
  component:HomeComponent,
  children:[
    {path : 'animation' , component:AnimationComponent},
    {path : 'action' , component:ActionComponent}
  ]
}

Angular 现在只知道两条路线，即。 movie-home/animation 和“movie-home/action”。没有 movie-home 路线，因为您在 child 中没有无路径路线。以下配置应该可以解决您的问题

{
  path:'movie-home',
  children:[
    {path : '' , component:HomeComponent},
    {path : 'animation' , component:AnimationComponent},
    {path : 'action' , component:ActionComponent}
  ]
}

当 router v3 发布时，请确保您使用的是 beta.2 或更高版本

有关详细信息，请参阅 http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes