アプリケーションロード時に特定のページに強制リダイレクト

Question

Angular 2アプリケーションをルートに関係なくデフォルトのルートに移動するように設定しようとしていますが、動作しないようです。

自分のapp-componentの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 }, 
]; 

、私は、ユーザーがデフォルトのページでアプリケーションを起動する場合は素晴らしい取り組んでいるリニアユーザフローを持つ電子アプリケーションを作成しています。私が3ページ目を読んでリフレッシュしている場合、アプリケーションの状態はすべて不調和です。私は状態を保持するためにデータベースを使用していないと私はローカルストレージに格納することは私の最終目標の負担が大きすぎると思います。

乾杯！

Answer 1

次のアーキテクチャをプロジェクトに実装したところで、redirect.componentを作成しました。ここでは、コースのロード後の場所を解決しました。以下は超簡単版です。

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に行く - 私の場合、私にはそれをデータベースからドラッグしました。しかし、これが最適なアプローチであるかどうかは分かりません。

Answer 2

router configurationを正しく設定してください。 あなたのルートを設定するときにもセットアップredirectsにwildcardsを使用することができます。

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

はangular2ルータに関する詳しい情報は、フルrouting docsを確認してください。

'home'ルートと 'other'ルートを使用した簡単な例を示します。空の ''ルートは '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に設定すると、ナビゲーションに関する詳細情報が表示されます。