Angular2-刷新页面时，url保持不变但没有加载适当的视图

Question

在 Angular2 中，我正面临这个问题。当您刷新页面时。URL 保持不变，但它不会在RouterOutlet.

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

应用程序

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

您可以看看有关此问题的以下问题：

• 当我刷新我的网站时，我收到 404。这是使用 Angular2 和 firebase
• Web 应用程序中的 PathLocationStrategy 与 HashLocationStrategy
• 使用 HTML5 路由时 Angular 2 的 Router 是否损坏？

希望它对你有帮助，蒂埃里