在应用加载时强制重定向到特定页面

Question

我正在尝试将我的 Angular 2 应用程序设置为在页面加载时转到默认路由，而不管它的路由是什么，但我似乎无法让它工作。

我在我的应用程序组件的 ngOnInit 中添加了逻辑以重定向到我的主路由，但它被忽略了。

import {Component, OnInit} from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(private router: Router) {}

  closeApplication() {
    electron.ipcRenderer.send('close-app');
  }

  ngOnInit() {
    console.log('I am being run.');
    this.router.navigate(['']);
  }

}

这是我的路由配置

import {LoginComponent} from "./login/login.component";
import {HomeComponent} from "./home/home.component";
import {AuthGuard} from "./shared/security/auth.guard";
import {RegisterComponent} from "./register/register.component";
import {ListingComponent} from "./listing/listing.component";
import {RedirectGuard} from "./shared/security/redirect.guard";
import {WelcomeComponent } from "./welcome/welcome.component";

export const routerConfig = [
  { path: 'login', component: LoginComponent, canActivate: [RedirectGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [RedirectGuard] },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: ListingComponent
      },
      {
        path: 'listing/:id',
        component: ListingComponent
      }
    ]
  },
  { path: '', component: WelcomeComponent },
  { path: '**', component: HomeComponent },
];

对于某些上下文，我正在创建一个具有线性用户流的 Electron 应用程序，如果用户在默认页面上启动该应用程序，该应用程序将运行得非常好。如果我在说第 3 页并刷新，整个应用程序状态就完全不正常了。我没有使用数据库来保留状态，我认为在本地存储中存储对于我的最终目标来说是一个太大的负担。

干杯！

Answer 1

尝试设置一个合适的 router configuration。配置路由时，您还可以使用 wildcards to setup redirects:

{path: '**', redirectTo: 'your-defaultPath', pathMatch:'full'}

查看完整的 routing docs 以获取有关 angular2 路由器的更多信息。

这是一个包含 'home' 和 'other' 路由的简单示例。空的“ ”路由被重定向到 'home'，任何不匹配的路由都被重定向到 home。

import {BrowserModule} from '@angular/platform-browser'
import {Component, NgModule} from '@angular/core'
import {RouterModule} from '@angular/router';

@Component({selector: 'app', template: 'App Shell<br> <router-outlet></router-outlet>'})
export class AppComponent {}

@Component({selector:'home', template:'Home component'})
export class HomeComponent {}

@Component({selector:'other', template:'Other component'})
export class OtherComponent {}

@NgModule({
  imports: [ 
    BrowserModule, 
    RouterModule.forRoot([
      {path:'home', component: HomeComponent},
      {path:'other', component: OtherComponent},
      {path:'', redirectTo:'home', pathMatch:'full'},
      {path:'**', redirectTo:'home'}
    ], {enableTracing:true}) 
  ],
  declarations: [AppComponent, HomeComponent, OtherComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

请注意，我将 enableTracing 选项设置为 true 以获取有关导航的更多信息。

Answer 2

我刚刚将以下架构实施到一个项目中，我在该项目中创建了一个 redirect.component 解决了课程应该去 post 加载的位置。以下为超级简化版；

import { Component, OnInit }    from '@angular/core';

@Component({
  selector: 'app-redirect',
  template: ``
})
export class RedirectComponent implements OnInit {
    private goDownPathOne: boolean = true;

    constructor() { }

    ngOnInit() {
        if(goDownPathOne)
            this.router.navigate('path1');
        else
            this.router.navigate('path2');
  }

}

然后在我的 app.routing 我有以下内容：

const COURSE_ROUTES: Routes = [
    // Home / Menu Screen
    { path: '', component: RedirectComponent },
    // Default Routes
    { path: 'screen', redirectTo: '/', pathMatch: 'full' },
    { path: 'text', redirectTo: '/', pathMatch: 'full' },
    { path: 'activity', redirectTo: '/', pathMatch: 'full' },
    { path: '**', redirectTo: '/', pathMatch: 'full' }

];

export const courseRouting: ModuleWithProviders = RouterModule.forRoot(COURSE_ROUTES);

所以在应用程序加载时，它总是转到 RedirectComponent 然后决定我们应该去哪里处理所提供的数据 - 在我的例子中我将它从数据库中拖下来。我不确定这是否是最佳方法，但如果确实有效！

在应用加载时强制重定向到特定页面

Force redirection to specific page on app load

electron

angular