具有Angular 2重载问题的Electron App

我已经设法通过电子刷新问题找出了Angular2的解决方案.使用最新版本的Electron和Angular2向Thorston Hans for helping us determine the solution发布道具.请注意,我们一直在跟随Angular2英雄之旅在Electron中进行演练.

在完成“英雄之旅”的大部分路由部分后,我们很快发现刷新电子浏览器窗口导致应用程序无法正确刷新当前页面.

我们正确地认为这与Angular2和Electron处理路由的方式有关.我们最终假设Angular2需要支持hashbang URL或Electron需要支持HTML5 URL路由.看起来像后者在Electron中无法立即实现,所以我们转向Angular2为我们提供了一种方法来让hashbang回到URL路径中.

下面是我们用于在Electron中使用路由的代码.

app.component.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';
}

注意我们从“providers”列表中删除了ROUTER_PROVIDERS(只留下了HeroService),并从文件开头的import语句中删除了它.我们还为Location添加了一个import语句.这里的想法是让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中刷新应用程序浏览器窗口,并按预期刷新页面.注意您的index.html文件不需要< base href>使用此方法时标记.我不清楚细节,但我认为HashLocationStrategy发生的自举会解决这个问题.希望这可以帮助！