javascript - 以 Angular 4 在路由器导出外加载页面

Question

我正在开发一个 angular 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

如果没有路由器 socket ，您将无法路由到页面。根据您的描述，听起来您需要另一个更高级别的路由器 socket ，比如在 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 组件的路由器导出中，因此登录页面将全屏显示，没有导航栏。 child1 和 child2 路由将出现在 Home Component 的路由器导出中。