Angular 2渲染页面没有router-outlet

4 回答

• 1

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

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

  回复于 2024-04-24T20:45:43+08:00
• 1

  如果我理解您的问题，您希望隐藏未登录用户的“顶部导航”和“幻灯片菜单” .

  我执行此操作的方法是将这些控件/组件从您在 <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 .

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

  回复于 2024-04-24T20:45:43+08:00
• 3

  你的问题的正确解决方案不是围绕 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

  回复于 2024-04-24T20:45:43+08:00
• 0

  This is the solution working in my app.

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

  创建TopNav组件 .

  创建SideNav组件 .

  创建要在登录后使用Top Nav，Side Nav和其他要向登录用户显示的其他东西显示的其他组件（可以说是Admin） .

  Route them in the Module like this...

  {
      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>
  

  回复于 2024-04-24T20:45:43+08:00