Angular 2 RC5 router.navigate無法正常工作

Question

如果用戶是訪客，則我具有以下表達式：

this.router.navigate(['/intro']);

在我的app.component.ts ngOnInit()方法中。

我的app.component.html具有<router-outlet></router-outlet>

但是當我以訪客身份訪問我的應用程序時，不會顯示IntroComponent並且如果沒有/intro ，則URL將保持空白。

怎么了？

我的app.routes.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
{path:'intro',component: IntroComponent},
{path:'login',component: LoginComponent},
{path:'register', component: RegisterComponent}
];

Answer 1

像這樣更改您的路線：

const appRoutes: Routes = [
{ path: '', redirectTo: HomeComponent, pathMatch: 'full'}, //(redirectTo or component)
{path:'intro',component: IntroComponent},
{path:'login',component: LoginComponent},
{path:'register', component: RegisterComponent}
];

默認的pathMatch策略是路由中的prefix ，因此帶有prefix path: ''實際上意味着每個路由。 所以everyroute被導航到HomeComponent 。

Answer 2

發生這種情況是因為從ngOnInit調用this.router.navigate(['/intro'])時，初始導航未完成。

有兩種解決方法：

解決方案1

在app.module.ts您禁用初始導航

RouterModule.forRoot(appRoutes, { initialNavigation: false })

參考： router.navigate在組件的OnInit上靜默失敗

解決方案＃2

如果您不想禁用初始導航，請使用setTimeout允許初始導航完成。

setTimeout(() => this.router.navigate(['/intro']), 1)