RC5 Angular2路由默認組件

Question

我有現有的PHP網站，我開始向其中添加angular2組件。

我添加了路由器腳本，以幫助通過其URL加載不同的組件。

當我離開組件頁面時，出現以下錯誤Error: Uncaught (in promise): Error: Cannot match any routes: 'dashboard'

我了解，我需要創建另一個組件以使此錯誤消失。 但是我不想創建另一個組件，因為頁面太多了，所以我最終會為每個頁面創建組件。

因此，我想問一個問題，如何制作1個默認組件，如果沒有可用的組件，它將自動提取，或者如何使該錯誤消失，因此如果找不到該路徑的任何路由器或組件，它就不會觸發。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {TestComponent} from "./test/test.component";


const appRoutes: Routes = [
    { path: 'search', component: TestComponent }
];


export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Answer 1

您可以添加wildcard route ，如果路由不匹配，則將重定向到默認組件。

 { path: 'default', component: DefaultComponent },
 { path: '**', redirectTo: '/default' }

因此，如果路由不匹配，您的默認組件將被加載到路由器插座中。

希望這可以幫助！！

Answer 2

我將其用作默認路由：

{ path: '', component: Home, text: 'Home' }

這是我的完整路線：

export const routes: TextRoute[] = [
    { path: '', component: Home, text: 'Home' },
    { path: 'accordion', component: AccordionDemo, text: 'Accordion' },
    { path: 'alert', component: AlertDemo, text: 'Alert' },
    { path: 'buttons', component: ButtonsDemo, text: 'Buttons' },
    { path: 'carousel', component: CarouselDemo, text: 'Carousel' },
    { path: 'collapse', component: CollapseDemo, text: 'Collapse' },
    { path: 'dropdown', component: DropdownDemo, text: 'Dropdown' },
    { path: 'pagination', component: PaginationDemo, text: 'Pagination' },
    { path: 'popover', component: PopoverDemo, text: 'Popover' },
    { path: 'progressbar', component: ProgressbarDemo, text: 'Progressbar' },
    { path: 'rating', component: RatingDemo, text: 'Rating' }
];

export const AppRoutes = RouterModule.forRoot(routes, { useHash: true });

在github上查看我的學習angular2項目，歡迎加入星號。

Answer 3

我太新了，無法發表評論，我的問題是您是否正在使用Express Backend？ app.use（）可能可以為您省去一些麻煩。 而不是聲明路由嘗試在app.js中

var routes = require('routes');
app.use('/name-of-url', routes )

然后在路線上

    router.get('name-of-url', function(res,req,next){
     res.sendFile(path to php file to serve)
})

您可能還需要完全確定將快速模板引擎更改為php。