Question

当我更改路线时，整个应用刷新并且看起来不像单页应用

我的打字稿编译得很好，应用程序都可以正常工作。但是，当我改变路线，例如到/注册页面，浏览器重新加载整个页面。

是因为我的导航栏吗？导航栏位于app.ts中，我应该移动它以使应用更顺畅地进行链接更改吗？

这是我的app.ts文件：

  import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
  import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
  import {Injectable} from 'angular2/angular2';
  import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';

  import {AuthService} from './authService';
  import {Login} from './components/login/login';
  import {Register} from './components/register/register';

  @Component({
      selector: 'app'
  })

  @View({
      template: `
      <header>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Pool Cover</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/login">Log In <span class="sr-only">(current)</span></a></li>
                <li><a href="/register">Sign up</a></li>                    
              </ul>
            </div>
          </div>
        </nav>      
    </header>

    <div class="content">
        <router-outlet></router-outlet> 
    </div>
  `,
      directives: [RouterOutlet, RouterLink]
  })

  @RouteConfig([
      { path: '/', redirectTo: '/login' },
      { path: '/login', component: Login, as: 'Login' },
      { path: '/register', component: Register, as: 'Register' },
  ])

  @Injectable()

  export class AppComponent {}

  bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService]);

这是我的index.html：

  <!DOCTYPE html>
  <html>
    <head>
      <base href="/"></base>
      <title>Title</title>

      <link rel="stylesheet" type="text/css" href="/src/bootstraptheme.css" />

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>    

      <script>
          System.config({
              transpiler: 'typescript',
              defaultJSExtensions: true
          });
      </script>

      <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
      <script src="../node_modules/angular2/bundles/router.dev.js"></script>
      <script src="../node_modules/angular2/bundles/http.js"></script>
      <script src="/src/firebase/firebaseNew.js"></script>  

    </head>

    <body id="container">

      <app></app>

      <script>      
        System.import('src/app/app');
      </script>

    </body>
  </html>

Answer 1

根据@EricMartinez在评论中提到的RouterLink页面，您需要使用以下格式的链接：

<a [router-link]="['./register']">Sign up</a>

另请参阅有关路由的Brian's AngularConnect 2015 talk。

Answer 2

如果您在浏览器中设置页面，浏览器会认为它需要重新加载，单击一个链接就可以了。请记得放<base href="/">

当我更改路线时，整个应用程序刷新并且看起来不像单页应用程序

2 个答案: