Question

我有HTML模板，其中包含幻灯片菜单和顶部导航菜单以及用于渲染主路径页面的块。像这样：

...
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>
...

但在此之后，我的登录页面会在此内容包装器块中呈现。如何在没有 route-outline 组件的情况下为渲染 LoginPage 编写一些代码？（用于不渲染顶部导航和幻灯片菜单）

Answer 1

保留路由器插座，但使用路由器防护装置以防止路由被呈现，除非用户登录。我在这里写博客：

https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

Answer 2

问题的正确解决方案不是router-outlet，而是使用一个额外的组件（我们称之为RootComponent）router-outlet（RO1），但没有导航和侧边菜单。在RO1中，您应该加载组件NavMenuComponent（使用导航，侧边菜单和自己的router-outlet RO2）。然后，您可以使用子路线确保在RootComponent中的RO1加载NavMenuComponent（将具有导航和侧边菜单）或LoginComponent（将没有导航和侧边菜单）。在RO2中将按现在加载内容。

假设RootComponent是模块中的deafult组件，路由将如下所示：

 const appRoutes: Routes = [

  { path: 'login', component: LoginComponent },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

  {
    path: 'app', component: NavMenuComponent,
    children: [
      { path: 'youorldpath1', component: YourOld1Component }, //the path will /app/youroldpath1 instead of /youroldpath1
      { path: 'youorldpath2', component: YourOld2Component, canActivate: [CanActivateViaAuthGuard] },
      { path: '**', component: ErrorComponent }
    ]
  },

  { path: '**', component: ErrorComponent }

];

RootComponent只能：

<router-outlet></router-outlet>

此处有更多信息：https://angular.io/guide/router#child-routing-component

Answer 3

如果我理解您的问题，您希望隐藏未登录用户的Top Nav和Slide菜单。

我这样做的方法是将这些控件/组件从您在<router-outlet></router-outlet>中呈现的页面中拉出来然后隐藏它们直到用户登录（可能通过身份验证服务上的布尔属性）显示用户已成功登录。）

类似于此：

<div class="content-wrapper">
    <top-nav *ngIf="authenticationService.userLoggedIn"></top-nav>
    <slide-menu *ngIf="authenticationService.userLoggedIn"></slide-menu>
    <router-outlet></router-outlet>
</div>

登录页面在路由器插座中呈现，当用户成功登录时，将在服务上设置标志，并呈现下一页并将顶部导航/幻灯片菜单添加到DOM。

如果我离开基地，请告诉我，也许我仍然可以提供帮助

Answer 4

这是可在我的应用中使用的解决方案。

仅使用登录页面内容创建登录组件。

创建TopNav组件。

创建SideNav组件。

创建您要在登录后显示给顶部用户，侧边导航和其他内容的其他组件（假设是管理员）。

像这样在模块中路由它们...

  {
    path: 'login',
    component: LoginComponent
  },
  {
   path: 'admin', 
   component: AdminComponent
 }

app.component.html

<router-outlet>

  <!-- When your route is '/login' login component rendered here.
  If it is '/admin' admin component rendered here -->
<router-outlet>

login.component.html

//login page content

admin.component.html

 <app-top-nav></app-top-nav>
 <app-side-nav></app-side-nav>
 <div class="content-wrapper">
     <router-outlet>
       <!-- Whatever route you map in top-nav and side-nav will be rendered here -->
    </router-outlet>
 </div>

Angular 2渲染页面没有router-outlet

4 个答案: