以角度4加载路由器出口外的页面

Question

我正在开发一个有角度的4应用程序,我想在router-outlet外加载login.page.ts

这是我的home.component.html文件

<div class="container">
   <top-nav-bar></top-nav-bar>
   <lett-nav-bar></lett-nav-bar>
   <router-outlet></router-outlet>
</div>

路线配置

const MAINMENU_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

有了这个,我可以在路由器内加载登录页面,但我想在进入路由器插座之前全屏加载登录页面.

Answer 1

没有路由器插座,您无法路由到页面.根据您所描述的内容,听起来您需要更高级别的其他路由器插座,例如在App组件中.像这样的东西:

<div class="container">
   <router-outlet></router-outlet>
</div>

然后,您可以将登录页面和主组件路由到此路由器插座.

您的路线配置将如下所示:

    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
      children: [
       { path: 'child1', component: Child1Component },
       { path: 'child2', component: Child2Component }
      ]
    }

登录页面和主页路由将显示在App Component的路由器插座中,因此登录页面将全屏显示,没有导航栏.child1和child2路由将出现在Home Component的路由器插座中.