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

我用这个作为默认路由：

{ 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 查看我的 learning angular2 项目，欢迎加星。

Answer 2

您可以添加一个 wildcard route，如果路由不匹配，它将重定向到默认组件。

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

所以如果路由不匹配你的默认组件将被加载到路由器出口。

希望对您有所帮助！！

Answer 3

我太新了，无法发表评论，我的问题是您是否在使用 express 后端？ 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)
})

您可能还需要将 express 模板引擎更改为 php，不确定。

RC5 Angular2 路由默认组件

RC5 Angular2 route default component

angularjs

angular-routing

angular2-template

angular2-routing

angular