Routes 当我改变路线时，整个应用程序都会刷新，看起来不像一个单页应用程序_Routes_Typescript_Angular

Routes 当我改变路线时，整个应用程序都会刷新，看起来不像一个单页应用程序

routes typescript angular

Routes 当我改变路线时，整个应用程序都会刷新，看起来不像一个单页应用程序,routes,typescript,angular,Routes,Typescript,Angular,当我改变路线时，整个应用程序会刷新，看起来不像一个单页应用程序我的typescript编译得很好，应用程序也可以正常运行。但是，当我更改路径（例如，转到/注册页面）时，浏览器会重新加载整个页面是因为我的导航栏吗？导航栏位于app.ts中，我是否应该移动它以使应用程序在链接更改时更平滑这是我的app.ts文件： import {Component, View, bootstrap, bind, provide} from 'angular2/angular2'; import {

当我改变路线时，整个应用程序会刷新，看起来不像一个单页应用程序

我的typescript编译得很好，应用程序也可以正常运行。但是，当我更改路径（例如，转到/注册页面）时，浏览器会重新加载整个页面

是因为我的导航栏吗？导航栏位于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]);

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

从'angular2/angular2'导入{组件、视图、引导、绑定、提供}；
从“angular2/Router”导入{Router，Router_绑定，RouterOutlet，RouteConfig，RouterLink，Router_提供者，APP_BASE_HREF}；
从'angular2/angular2'导入{Injectable}；
从'angular2/HTTP'导入{HTTP_提供者，HTTP，头文件}；
从“/AuthService”导入{AuthService}；
从“./components/Login/Login”导入{Login}；
从“./components/Register/Register”导入{Register}；
@组成部分({
选择器：“应用程序”
})
@看法({
模板：`
切换导航




`,
指令：[路由器输出，路由器链接]
})
@线路图([
{路径：'/'，重定向到：'/login'}，
{path:'/login'，组件：login，as:'login'}，
{path:'/register'，组件：register，as:'register'}，
])
@可注射（）
导出类AppComponent{}
引导（AppComponent、[ROUTER_PROVIDERS，provide（APP_BASE_HREF，{useValue:'/'}）、HTTP_PROVIDERS，AuthService]）；

这是我的索引。html:

  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]);

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


标题
System.config({
transpiler:'typescript'，
defaultJSExtensions:true
});
系统导入（'src/app/app'）；

如果在浏览器中设置页面，浏览器会认为它需要重新加载，单击链接即可工作。请记住，根据@EricMartinez在评论中提到的页面，您需要使用以下格式的链接：

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

关于路由。
我有这一点-参见上面的代码您需要阅读文档：您确定页面真的重新加载了吗？浏览器是否再次执行js、css和html文件的所有请求？我基本上是想让导航栏保持不变，并且只在路由出口发生路由更改时重新加载内容，例如当我单击链接时，我这样做了，当我单击链接时，它仍然刷新标题导航栏。我必须使用routerLink而不是router链接。这可能在某个时候发生了变化，因为我在很多地方看到了连字符形式。最新版本似乎表明驼峰案例版本是正确的形式。