如何匹配带有angular2 rc5的APP MODULE TS中的任何路线？

Question

我有一个简单的angular应用程序，并且是第一次使用Angular2。

我在Firefox控制台中收到错误提示：“例外：未捕获（承诺中）：错误：无法匹配任何路由：'books / huckleberry'”

book.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-directory',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {

  book: string; 

  constructor(private route: ActivatedRoute) { 

    this.book= route.snapshot.params['book'];

  }

  ngOnInit() {
  }

}

app.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { BookComponent } from "./book/book.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES: Routes = [


    {
      path:'book',
      component: BookComponent,
      children: [

        { path: 'book/:book', component: BookComponent}

      ]
    },
    { path: '', component: HomeComponent }

];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

app.module.ts

...
import { BookComponent } from './book/book.component';

import { RouterModule } from "@angular/router";

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'book', component: BookComponent },
      // { path: '**', component: PageNotFoundComponent }
    ]),

  RouterModule.forChild([
    {
      path: 'book', //parent path
      children: [
        {
          path: 'book/:book', 
          component: BookComponent,
        }
      ]
    }
  ])

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我访问http：// localhost：4200 / book时 ，没有错误。 但是当我访问http：// localhost：4200 / book / huckleberry时 ，第一次使用Angular2。

我在Firefox控制台中收到错误提示：“例外：未捕获（承诺）：错误：无法匹配任何路由：'book / huckleberry'”

您知道如何更新app.module.ts吗？

我应该能够在book.component.html中获得{{book}}

Answer 1

我可以通过以下代码解决此问题：

app.routes.ts const APP_ROUTES：路线= [

    { path:'directory', component: BookComponent },
    { path:'directory/:book', component: BookComponent },
    { path: '', component: HomeComponent }

];

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    DirectoryComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'book', component: BookComponent },
      { path: 'book/:book', component: BookComponent }
      // { path: '**', component: PageNotFoundComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

使用上面的代码，我现在可以获取参数并将其通过{{book}}打印到页面上