Angular2-刷新页面时，url保持不变但未加载适当的 View

Question

在 Angular2 中，我遇到了这个问题。刷新页面时。 URL 保持不变，但它不会在 RouterOutlet 中加载适当的 View 。

除刷新页面问题外一切正常。

app.ts

import {Component,bind} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
                    <ul class="nav navbar-nav">
                    **<li><a [routerLink]="['Home']">One</a><hr/></li>
                     <li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Angular</a></li>
                            <li><a href="#">.NET</a></li>
                        </ul>
                    </li>
            </ul>
        </nav>

    <router-outlet></router-outlet>`
 })

@RouteConfig([
  {path:'/Home', name: 'Home', component: HomeCmp}
  {path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
])

export class MicropuppyApp {
    constructor(){
        console.log("Micropuppy app started");
    }
}
 bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);

Answer 1

使用路由的默认策略(HTML5 历史 API)，您需要一个服务器配置来将所有路径重定向到 HTML 入口点文件。使用 hashbang 方法就没有必要了……如果你想切换到这种方法，只需使用以下代码:

import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass:HashLocationStrategy});
]);

你可以看看关于这个问题的这些问题:

• When I refresh my website I get a 404. This is with Angular2 and firebase
• PathLocationStrategy vs HashLocationStrategy in web apps
• Is Angular 2's Router broken when using HTML5 routes?

希望对你有帮助， 蒂埃里