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

2023年8月24日 347次阅读

在Angular2中,我正面临着这个问题.刷新页面时. URL保持不变,但它不会在RouterOutlet中加载适当的视图.

一切正常,除了刷新页面问题.

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

最佳答案 使用路由的默认策略(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?

希望它能帮到你,
蒂埃里

点赞