Question

可以使用从ROUTING＆amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; NAVIGATION doc页面 https://angular.io/docs/ts/latest/guide/router.html

（1）点击英雄; （2）选择英雄来查看细节; （3）点击浏览器后退按钮到Heroes =＆gt;英雄路线的内容未完全加载，动态内容未呈现

我有同样的问题在本地运行相同的代码。

// main entry point
import { bootstrap }            from '@angular/platform-browser-dynamic';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

//app.routes.ts
import { provideRouter, RouterConfig }  from '@angular/router';

import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
import { HeroesRoutes }       from './heroes/heroes.routes';

import { LoginRoutes,
         AUTH_PROVIDERS }     from './login.routes';

import { CanDeactivateGuard } from './interfaces';

export const routes: RouterConfig = [
  ...HeroesRoutes,
  ...LoginRoutes,
  ...CrisisCenterRoutes
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  AUTH_PROVIDERS,
  CanDeactivateGuard
];

//heroes/heroes.routes.ts
import { RouterConfig }          from '@angular/router';
import { HeroListComponent }     from './hero-list.component';
import { HeroDetailComponent }   from './hero-detail.component';

export const HeroesRoutes: RouterConfig = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

Answer 1

阅读＆＃34;附录：LocationStrategy和浏览器URL样式＆＃34;在https://angular.io/docs/ts/latest/guide/router.html的底部。

您可以使用HashLocationStrategy而不是默认策略，但您不会获得好的网址，而是会在例如angular 1 ui-router中获得默认的哈希链接。但是更多的浏览器会更好地支持它。

#/dashboard代替/dashboard

您可以在主要入口点进行如下设置，例如： main.ts：

// main entry point
import { bootstrap }            from '@angular/platform-browser-dynamic';
// Add these symbols to override the `LocationStrategy`
import { LocationStrategy,
         HashLocationStrategy } from '@angular/common';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/
])
.catch(err => console.error(err));

Answer 2

单击后退按钮时，我最终重新加载页面

 // this occurs when the user clicks the back button
 window.onpopstate = function(event) {
    document.location.reload();
  };

浏览器后退按钮仅适用于Chrome（不是IE 11或Safari或Firefox）

2 个答案: