Question

app.component.html中包含常用内容，并且“路由”配置如下：

const accountRoutes: Routes = [
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  { path: 'register', component: RegisterComponent, pathMatch: 'full' },
  { path: 'reset-password', component: ResetPasswordComponent, pathMatch: 'full' },
  { path: 'auth-actions', component: AuthActionsComponent, pathMatch: 'full' },
];

const appRoutes: Routes = [
  { path: 'account', children: accountRoutes },
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: '404', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: '/404' },
];

我在呈现的页面中看到的网址是空的

<my-home><my-home/>
<my-login><my-login/>

当我从登录页面路由回到首页（使用this.router.navigateByUrl('');）时，会发生这种情况。如果我用空的URL刷新页面，则仅显示主页。任何想法为什么会发生这种情况？

编辑：

将导航this.router.navigateByUrl('')包装到NgZone.run( <insert redirect here> )中可以解决此问题。重定向在ngZone外部的回调中被调用似乎是一个问题。仍然很奇怪，因为路由服务被调用了，但是它并没有删除旧的（登录）组件。

此操作在Google身份验证窗口关闭后被调用，因此可能出于某种原因在NgZone之外发生。

Answer 1

问题是导航出于某种原因在zone之外运行。它正在调用第三方API（google auth），因此其中发生了一些不可思议的事情，以离开该区域。

解决方案是将其包装在zone.run(/* do the redirect here */)

中

Angular RouterOutlet呈现几个组件

1 个答案: