Question

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

 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
}

文件在下面的 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),
];

main.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.component.ts MovieCenter /动画/ animation.component.ts

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

模板：Action Component

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路线，因为您在儿童中没有无路径路线。以下配置应解决您的问题

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

确保您在发布路由器v3

时处于 beta.2 版本或更高版本

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

错误：未捕获（在承诺中）：错误：无法匹配任何路径RC4子路由

1 个答案: