Angular 2渲染页面没有路由器插座

问题描述：

我有HTML模板，带有幻灯片菜单和顶部导航菜单以及渲染主路径页面的块。这样的：Angular 2渲染页面没有路由器插座

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

但之后，我的登录页面，在这个内容包装块渲染。如何编写一些渲染代码LoginPage没有route-outline component？（不呈现顶部导航和滑动菜单）

答

保持路由器出口，但使用路由器警卫以防止呈现，除非用户登录的路线。我的博客上讲述在这里：

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

答

如果我理解你的问题，你想隐藏的用户未登录的顶部导航和滑动菜单。

我的方法这样做的将这些控件/组件从<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。

如果我大错特错，让我知道，也许我还可以帮忙

我认为这是不是很好的解决方案。我认为存在一些标准的解决方案。 –

所以，为了确保我理解你正在尝试做什么，你需要渲染顶部导航和幻灯片菜单，并将它放在''中呈现的每个页面上。你不想让他们渲染的唯一时间是当他们登录页面？ –

是的，你理解我 –

答

正确的解决问题的方法是不会到处去router-outlet，但使用一个额外的元件与router-outlet（RO1）（让我们称之为它RootComponent），但没有导航和侧菜单。在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

Angular 2渲染页面没有路由器插座

相关推荐