RC5 Angular2 路由默认组件答案

【问题标题】：RC5 Angular2 route default componentRC5 Angular2 路由默认组件
【发布时间】：2017-01-07 09:47:06
【问题描述】：

我有现有的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);

【问题讨论】：

标签： angularjs angular angular2-routing angular-routing angular2-template

【解决方案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 项目，欢迎星星。

【讨论】：

【解决方案2】：

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

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

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

希望这会有所帮助！

【讨论】：

【解决方案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)
})

您可能还需要将您的快速模板引擎更改为 php，不完全确定。

【讨论】：