Question

在我的应用中，我有以下行

@RouteConfig([
    {path: '/', name: 'DashboardMain', component: DashboardComponent, useAsDefault: true}
])
export class DashboardCenterComponent {
}

当我连接到/ ...它显示DashboardCenterComponent并且它没问题。但问题是，当我重定向到任何其他页面时，我没有任何已配置的路线，它会显示我的空白屏幕。

儿童路线：

<ListView
    android:layerType="software"
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:choiceMode="singleChoice"
    android:drawSelectorOnTop="false"
    android:scrollingCache="false"
    android:animationCache="false"
    android:listSelector="@drawable/list_selector">
</ListView>

我需要一种机制，将从不存在的路由重定向到根路由。

例如，我访问 localhost：3000 / hello ，但我没有路由。我需要重定向到 localhost：3000 。怎么做？

Answer 1

router.recognize可以救你

    import {Router} from 'angular2/router';
    import {Location} from 'angular2/platform/common';

    @Component({
        ....
    })
    @RouteConfig([
        ....
    ])
        export class AppComponent {
          constructor(router: Router, location: Location){

            router.subscribe(() => {

              router.recognize(location.path()).then((instruction) => {
                if(!instruction){
                  // this code will execute if there no route exists for the current url
                  router.navigate(['/DashboardMain']); 
                }
              });

           });

          }
        }

更新：在每个导航中添加了路由器订阅以检查网址

Answer 2

在我的应用程序中，我有一个ErrorComponent，当路由错误时我会显示它，但你可以重定向你想要的组件，如：

{ path: '/*ErrorRoutes', name: 'NotFound', component: NotFoundComponent }

这意味着配置所有路线，但对于其他任何路线＆＃34; / * ＆＃34;那个

您的代码已更新：

 @Component({
        selector: 'sampleSelector',
        template: `<router-outlet></router-outlet>`,
        directives: [ROUTER_DIRECTIVES],
        providers: [ROUTER_PROVIDERS, HTTP_PROVIDERS]
    })
    @RouteConfig([
        {
            path: '/...', name: 'Dashboard', component: DashboardCenterComponent,    useAsDefault: true
        },
            { path: '/*NotFound', name: 'Dashboard', component: DashboardCenterComponent }
    ])
    export class AppComponent {
    }

Angular 2（TypeScript）处理与任何已定义的路由不匹配的无效网址＆＃39;路径

2 个答案: