在Angular 5 + ElectronJS中更改路线时的白页

时间:2018-01-24 14:46:38

标签: angular electron angular-routing

我的Angular5 + ElectronJS应用程序出了问题。当我在浏览器中运行应用程序时,一切正常,但是使用ElectronJS,每次单击导航栏中的项目时,应该更改应用程序的路径,电子只会进入空白页面,在控制台中绝对不显示任何内容任

根据我的阅读,这是Angular的路由器如何工作的问题。我尝试过的事情(不成功):

  • 将index.html中的<base href=>'/'更改为''./
  • 在app-routing.ts中将imports: [RouterModule.forRoot(routes)]更改为imports: [RouterModule.forRoot(routes, { useHash: true })]
  • 在我的超链接中使用不同的href,例如:<a href='palas'><a href='#/palas'><a href='#!/palas'>
  • 以前列出的几乎所有内容的组合。

这是我非常基本且标准的app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ShovelComponent } from './shovel/shovel.component';
import { TruckComponent } from './truck/truck.component';
import { ShovelsComponent } from './shovels/shovels.component';
import { TrucksComponent } from './trucks/trucks.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'palas',
    component: ShovelsComponent
  },
  {
    path: 'camiones',
    component: TrucksComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

现在,我只发现了一件有用的东西,但不是真的。在我的超链接中,如果我<a routerLink="/palas">,它将成功地带我到该路线,并将加载该组件。这对我不起作用,因为我有一些服务,需要在加载组件的同时启动,现在它们从应用程序开始,并且在加载其他组件时已经在运行。

1 个答案:

答案 0 :(得分:1)

如果其他人遇到同样的问题,我最终保持路由不变。那将是:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'palas',
    pathMatch: 'full'
  },
  {
    path: 'palas',
    component: ShovelsComponent
  },
  {
    path: 'camiones',
    component: TrucksComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

对于我的超链接,我使用routerLink="{path}"代替href="{path}"

<a routerLink="/" routerLinkActive="active"> Home </a>
<a routerLink="/palas" routerLinkActive="active"> Palas </a>
<a routerLink="/camiones" routerLinkActive="active"> Camiones </a>

对于index.html,我使用了<base href="./">

有了这个,我就可以在ElectronJS应用程序内部和网络浏览器中浏览我的不同路线。

至于我没有重新加载服务的问题,我最终编写了一个解决方法来重新启动服务在公共函数中执行的所有操作,并且我从正在加载的组件的构造函数中调用它。