Angular 2 - 路由 useAsDefault 不起作用答案

【问题标题】：Angular 2 - Routing useAsDefault not workingAngular 2 - 路由 useAsDefault 不起作用
【发布时间】：2016-09-20 04:42:49
【问题描述】：

我使用 angular 2 进行路由，使用节点进行本地托管。

当我对路线使用“useAsDefault:true”时，导航栏链接不再起作用，当我希望 URL 转到 http://localhost/home 时，URL 转到 http://localhost/（空白页）

一个我删除了导航栏正常工作的标志，我可以去 /home 路线，但我去空白页

谁能解释为什么默认标志不能正常工作？

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

<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

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

<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>

【问题讨论】：

标签： javascript angularjs typescript routing angular

【解决方案1】：

只需为每个尝试访问但未定义的路由添加一个路由并将其重定向到您的主路由：

@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'] }
])

【讨论】：

谢谢，但没用。与 useAsDefault 相同的行为。（导航栏不工作，没有重定向）
谢谢！您显示的最后一行 { path: '/**', redirectTo: ['Home'] } 是我正在浏览许多寻找的 SO 文章，因为我在 angular.io 文档中找不到它。
很高兴它帮助了你！ :)

【解决方案2】：

可能会迟到：

useAsDefault 已弃用，请使用：

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

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

【讨论】：

【解决方案3】：

当您使用 useasdefault 时，这意味着您有一个父路由，其中有子路由，即

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

两个 url 路由将设置在一个父 url 下，如下所示：

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

然后在仪表板组件中，您现在创建仪表板根目录和设置路由作为子路由，如下所示：

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

在您的情况下，找出您需要封装的内容。例如，home, article 和 detail 可以在一个父 url 下说：

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

然后将三个 url 配置移动到 HomeDataComponent 或您给它的任何名称：

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

使用useAsDefault 时，您需要先出现父路由和子路由上的useAsDefault。

查看this 了解详细说明。希望它有效。

【讨论】：