Question

如果用户是访客，我有以下表达式：

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

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

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

但是当我以访客身份访问我的应用时，如果没有IntroComponent，则不会显示/intro并且网址仍为空。

出了什么问题？

我的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，因此path: '' prefix实际上意味着每个路由都是HomeComponent。因此，每个路由都被导航到{{1}}。

Answer 2

这是因为从this.router.navigate(['/intro'])调用ngOnInit时未完成初始导航。

有两种方法可以解决这个问题：

解决方案＃1

在app.module.ts中禁用初始导航

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

参考：https://awesome.dev

解决方案＃2

如果您不想停用初始导航，请使用setTimeout以完成初始导航。

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

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

2 个答案: