具有Angular 2重载问题的Electron App [重复]

3 回答

• 2

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

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

  我们正确地认为这与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"来自"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中刷新应用程序浏览器窗口，并按预期刷新页面 . Note 使用此方法时，index.html文件的 not 需要 <base href> 标记 . 我不清楚细节，但我认为HashLocationStrategy发生的自举会解决这个问题 . 希望这可以帮助！

  回复于 2024-04-29T08:06:56+08:00
• 0

  我花了很多时间试图解决这个恼人的问题 . 看起来当路由器被操作时它将location.href设置为file：/// yourroute，所以当它重新加载时，没有快乐 . 我尝试将file：// window .__ filename添加到我的基础href，但没有运气 . 我真的想找到解决方案！如果你解决了，请告诉我 .

  回复于 2024-04-29T08:06:56+08:00
• 1

  我实际上无法确认，因为我转移到React并最终使用React-Router BrowserHistroy运行到同一个问题 . 但看起来Angular 2使用Html5干净网址作为默认设置 . （即：你的基地/你的路线） . 所以电子重装正在寻找“你的基地/你的路线”，这不是一个真正的位置 .

  使用hashbang样式的URL工作得很好 . （即：你的基础/＃your-route） . 所以使用React，hashHistory路由按预期方式 . 我没有探究Angular 2是否允许使用hashbang url，但如果确实如此，我敢打赌它会解决问题 . （或探索Electron是否可以配置为使用html5样式路线）

  回复于 2024-04-29T08:06:56+08:00