Angular 2 - 路由使用AsDefault不起作用

Question

I am using angular 2 for routing and node for hosting locally. 我使用角度2进行路由，并使用节点进行本地托管。

When I use 'useAsDefault:true' for my route the nav bar links no longer work and the URL goes to http://localhost/ (Blank Page) when I want it to go to http://localhost/home 当我对我的路线使用'useAsDefault：true'时，导航栏链接不再起作用，当我希望它转到http：// localhost / home时，URL会转到http：// localhost / （空白页面）

One I remove the flag the nav bar works correctly and I am able to go to the /home route but I go to the blank page 一个我删除导航栏正常工作的标志，我能够到/ home路线，但我去了空白页面

Can anyone shed any light on why the default flag is not working correctly ? 任何人都可以解释为什么默认标志不能正常工作？

App.Component.ts App.Component.ts

@RouteConfig([
  { path: '/home', name: 'Home', component: HomeComponent /*, useAsDefault : true */},
  { path: '/articles', name: 'Posts', component: PostsComponent  },
  { path: '/detail/:id', name: 'PostDetail', component: PostDetailComponent },
  { path: '/login', name: 'Login', component: LoginComponent  },
])

App.Component.html App.Component.html

<ul class="topnav">
  <li><a [routerLink]="['Home']">Home</a></li>
  <li><a [routerLink]="['Posts']">Articles</a></li>
  <li><a href="#p">Publisher</a></li>
  <li><a [routerLink]="['Login']">Login</a></li>
</ul>

<router-outlet></router-outlet>

Main.ts Main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';

bootstrap(AppComponent,  [ROUTER_PROVIDERS, HTTP_PROVIDERS]);

index.html 的index.html

<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Blog</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/styles.css">

     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <blog-app>Blog Loading...</blog-app>
  </body>
</html>

Answer 1

Just add a route for every route one is trying to access that is not defined and redirect it to your home route: 只需为尝试访问的未定义的每个路由添加路由，并将其重定向到您的主路由：

@RouteConfig([
  { path: '/home', name: 'Home', component: HomeComponent },
  { path: '/articles', name: 'Posts', component: PostsComponent },
  { path: '/detail/:id', name: 'PostDetail', component: PostDetailComponent },
  { path: '/login', name: 'Login', component: LoginComponent },
  { path: '/**', redirectTo: ['Home'] }
])

Answer 2

Might b late: 可能迟到了：

useAsDefault is deprecated, use this: 不推荐使用useAsDefault ，请使用：

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

official doc: https://angular.io/docs/ts/latest/guide/router.html 官方文件： https ： //angular.io/docs/ts/latest/guide/router.html

Answer 3

When you use the useasdefault it means that you've a parent route and within it there's child routes ie 当你使用useasdefault时，它意味着你有一个父路由，并且在其中有子路由，即

localhost:8000/dashboard/dashboard
localhost:8000/dashboard/settings

the two url routes will be set under a parent url like this: 两个url路由将设置在父URL下，如下所示：

{path: '/dashboard/...', component:Dashboard}

then in the Dashboard component you now create the dashboard root and the settings route as child routes like this: 然后在仪表板组件中，您现在创建仪表板根目录和设置路径作为子路由，如下所示：

{path: 'dashboard', component:DashboardAdmin, useAsDefault: True}
{path: 'settings', component:Settings}

in your case, figure out what you need encapsulated. 在你的情况下，找出你需要封装的东西。 for instance, home, article and detail could be under one parent url say: 例如， home, article和detail可能在一个父网址下面说：

{path: '/home/...' component: HomeDataComponent}
{ path: '/login', name: 'Login', component: LoginComponent  },

then move the three urls config into HomeDataComponent or whichever name you give it: 然后将三个url配置移动到HomeDataComponent或您给它的任何名称：

@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent , useAsDefault : true},
{ path: '/articles', name: 'Posts', component: PostsComponent  },
{ path: '/detail/:id', name: 'PostDetail', component: PostDetailComponent },
])

When using useAsDefault you need to have the parent route and the useAsDefault on the child route you want to appear first. 使用useAsDefault您需要在要首先显示的子路由上使用父路由和useAsDefault 。

Check this for a detailed explanation. 请查看此详细说明。 Hope it works. 希望它有效。

Angular 2 - 路由使用AsDefault不起作用

问题描述

3 个解决方案

解决方案1
5 2016-05-23 11:08:31

解决方案2
2 2017-02-20 09:07:50

解决方案3
0 2016-05-23 11:48:38

Angular 2 - 路由使用AsDefault不起作用

问题描述

3 个解决方案

解决方案1 5 2016-05-23 11:08:31

解决方案2 2 2017-02-20 09:07:50

解决方案3 0 2016-05-23 11:48:38

解决方案1
5 2016-05-23 11:08:31

解决方案2
2 2017-02-20 09:07:50

解决方案3
0 2016-05-23 11:48:38