javascript - Angular 2 - 路由 useAsDefault 不起作用

标签 javascript angularjs typescript routes angular

我使用 Angular 2 进行路由,使用节点进行本地托管。

当我为我的路线使用“useAsDefault:true”时,导航栏链接不再有效并且 URL 转到 http://localhost/ (空白页)当我希望它转到 http://localhost/home

一个是我删除了导航栏正常工作的标志,我可以转到/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>

最佳答案

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

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

关于javascript - Angular 2 - 路由 useAsDefault 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37388659/

相关文章:

javascript - AngularJS ngIf 阻止在指令中查找元素

javascript - 出现错误 Socket 正在尝试重新连接到 Sails

javascript - 如何获得 promise 链中第一个成功的 promise 的值(value)

javascript - ui-view 没有为 angular-ui-tab 渲染相应的模板?

javascript - angularJs 从数组中排除已经选择的项目

angular - 当路径完全匹配 '/' 时如何突出显示?

javascript - 高效声明 JavaScript 变量

json - 如何在以数字为键的 JSON 数据上使用 ng-repeat?

javascript - 更改 TypeScript compilerOptions->lib 是否会与 NPM 包或依赖项发生冲突

reactjs - 如何在 react-native 中正确输入 measureLayout