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 },
];

对于某些上下文，我正在创建一个具有线性用户流的Electron应用程序，如果用户在默认页面上启动应用程序，该应用程序工作正常。如果我在第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。配置路线时，您还可以使用wildcards设置redirects：

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

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

这是一个简单的例子，主页＆＃39;和其他＆＃39;路线。空的＆＃39; ＆＃39;路线被重定向到＆＃39; home＆＃39;任何不匹配的路线都会被重定向到家。

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以获取有关导航的更多信息。

强制重定向到app app上的特定页面

2 个答案: