我已经设法解决 Angular2 with Electron 刷新问题。托斯顿·汉斯的道具帮助我们确定解决方案 https://github.com/ThorstenHans/electron-ts-ng2使用最新版本的 Electron 和 Angular2。请注意,我们一直在 Electron 中进行 Angular2 英雄之旅演练。
在完成《英雄之旅》的大部分路由部分后,我们很快发现刷新电子浏览器窗口会导致应用程序无法正确刷新当前页面。
我们正确地假设这与 Angular2 和 Electron 处理路由的方式有关。我们最终假设 Angular2 需要支持 hashbang URL,或者 Electron 需要支持 HTML5 URL 路由。似乎后者在 Electron 中无法立即实现,因此我们求助于 Angular2,它为我们提供了一种将 hashbang 放回 URL 路径的方法。
下面是我们用来让路由在 Electron 中工作的代码。
应用程序组件.ts
import { Component } from 'angular2/core';
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard.component';
import { RouteConfig, ROUTER_DIRECTIVES } from
'angular2/router';
import {Location} from 'angular2/src/platform/browser/location/location'
@RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
}
])
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [
HeroService
]
})
export class AppComponent {
title = 'Tour of Heroes';
}
Note we removed从“提供者”列表中删除 ROUTER_PROVIDERS(仅留下 HeroService),并将其从文件开头的导入语句中删除。我们还添加了 Location 的导入语句。这里的想法是让 Angular2 使用 hashbang URL。
接下来是 app.ts 文件。
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy} from 'angular2/src/platform/browser/location/location_strategy';
import {HashLocationStrategy} from 'angular2/src/platform/browser/location/hash_location_strategy';
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy,
{ useClass: HashLocationStrategy })]);
这需要一些挖掘才能找到包含导出的正确 Angular2 文件夹,但它们在那里非常荣耀。因此,基本上,我们告诉 Angular2 在解析 URL 时使用“HashLocationStrategy”。然后,我们能够刷新 Electron 中的应用程序浏览器窗口,我们的页面也按预期刷新。Note你的index.html文件确实not need a <base href>
使用此方法时标记。我不清楚细节,但我假设 HashLocationStrategy 发生的引导会处理这个问题。希望这可以帮助!