Angular2-刷新页面时，url保持不变，但适当的视图不会'；不要上膛
在Angular2，我面临着这个问题。当你刷新页面时。URL保持不变，但未在Angular2-刷新页面时，url保持不变，但适当的视图不会'；不要上膛,angular,angular2-routing,Angular,Angular2 Routing,在Angular2，我面临着这个问题。当你刷新页面时。URL保持不变，但未在RouterOutlet中加载相应的视图 除了刷新页面问题外，一切正常。 应用程序ts import {Component,bind} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {FORM_DIRECTIVES} from 'angular2/form'; import{HomeCmp} from
RouterOutletimport {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)]);
从'angular2/core'导入{Component，bind}；
从'angular2/platform/browser'导入{bootstrap}；
从'angular2/FORM'导入{FORM_指令}；
从'Angular/src/Home/Home.ts'导入{HomeCmp}；
从'Angular/src/ContactUs/ContactUs.ts'导入{ContactUsCmp}；
从“angular2/Router”导入{Router、Router_PROVIDERS、RouteConfig、Router_指令、APP_BASE_HREF、LocationStrategy、RouteParams、Router_BINDINGS}；
@组成部分({
选择器：“微型小狗应用程序”，
templateUrl:“ANGULAR/Templates/home.html”，
指令：[HomeCmp、ROUTER_指令、ContactUsCmp]，
模板：`
**-
`
})
@线路图([
{路径：'/Home'，名称：'Home'，组件：HomeCmp}
{路径：'/ContactUs'，名称：'ContactUs'，组件：ContactUsCmp}
])
出口级微型木偶{
构造函数（）{
log（“Micropuppy应用程序启动”）；
}
}
bootstrap（MicropuppyApp，[ROUTER_PROVIDERS，bind（APP_BASE_HREF）.toValue（location.pathname）]；
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});
]);
希望，此链接将对您有所帮助。我通过将此代码放在
index.html<script>document.write('<base href="/" />');</script>
document.write（“”）；
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.location.href = "http://" + document.location.host;
</script>
</head>
</html>
window.location.href=“http://”+document.location.host；
{
"name": "Express server",
"version": "",
"dependencies": {
"express": "^4.14.0"
}
}
var express = require('express');
var app = express();
app.use(express.static('dist'));
// 'dist' is my build folder, you can add yours. this will take care of all static files.
app.use('/*', express.static('dist/index.html'));
// This will make sure that every route should serve index.html first
app.listen(8080, function () {
console.log('app listening on port 8080!!')
});
node server.js
现在，每个请求都将通过你的应用程序服务器，它将确保每次刷新/重新加载index.html时都能得到服务，这将提升angular应用程序。它会按预期工作。但使用这种方法，它添加了
#PathLocationStrategy