Fatal编程技术网
  • navigation/
  • Navigation 在angular5中登录页面之前隐藏导航栏

Navigation 在angular5中登录页面之前隐藏导航栏

navigation

Navigation 在angular5中登录页面之前隐藏导航栏,navigation,angular5,angular4-router,Navigation,Angular5,Angular4 Router,我在angular5应用程序中工作，所以我在github中使用了angular5模板，并且我尝试了与本教程相同的方法，在验证之前隐藏导航栏 我没有收到任何错误，但导航栏始终隐藏，即使在用户身份验证之后，我正在使用后端SpringBoot（SpringSecurity+JWT） 项目结构是这样的： 文件app-sidebar-component.html： 在这个文件中，我在“isLoggedIn$”下面得到一条红线，它表示：未定义ng标识符isLoggedIn$，组件声明、模板变量声明和元素引

我在angular5应用程序中工作，所以我在github中使用了angular5模板，并且我尝试了与本教程相同的方法，在验证之前隐藏导航栏

我没有收到任何错误，但导航栏始终隐藏，即使在用户身份验证之后，我正在使用后端SpringBoot（SpringSecurity+JWT）

项目结构是这样的：

文件app-sidebar-component.html：

在这个文件中，我在“isLoggedIn$”下面得到一条红线，它表示：未定义ng标识符isLoggedIn$，组件声明、模板变量声明和元素引用不包含这样的成员

 <div class="sidebar">
  <app-sidebar-header></app-sidebar-header>
  <app-sidebar-form></app-sidebar-form>
  <app-sidebar-nav *ngIf="isLoggedIn$ | async"></app-sidebar-nav>
  <app-sidebar-footer></app-sidebar-footer>
  <app-sidebar-minimizer></app-sidebar-minimizer>
</div>
在目录服务中：

文件：auth.guard.ts

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
import {AuthenticationService} from './authentication.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.authService.isLoggedIn
      .take(1)
      .map((isLoggedIn: boolean) => {
        if (!isLoggedIn){
          this.router.navigate(['pages']);
          return false;
        }
        return true;
      });
  }
}
如您所见，我在教程中为路径“dashboard”添加了值canActivate:[AuthGuard]

这是登录前应该隐藏的文件_nav.ts，它包含在上面的app-sidebar-nav.component.ts中

export const navigation = [
  {
    name: 'Tableau de bord',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    name: 'Clients',
    url: '/GestionClients',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des clients',
        url: '/GestionClients/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un client',
        url: '/GestionClients/ajouter',
        icon: 'icon-puzzle'
      }
      ]
  },
  {
    name: 'Développeurs',
    url: '/GestionDevloppeurs',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des développeurs',
        url: '/GestionDevloppeurs/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un nouveau développeur',
        url: '/GestionDevloppeurs/ajouter',
        icon: 'icon-puzzle'
      }
    ]
  },
  {
    name: 'Projets',
    url: '/GestionProject',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des projets',
        url: '/GestionProject/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un projet',
        url: '/GestionProject/ajouter',
        icon: 'icon-puzzle'
      }

    ]
  },
  {
    name: 'Base',
    url: '/base',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Cards',
        url: '/base/cards',
        icon: 'icon-puzzle'
      },
      {
        name: 'Carousels',
        url: '/base/carousels',
        icon: 'icon-puzzle'
      },
      {
        name: 'Collapses',
        url: '/base/collapses',
        icon: 'icon-puzzle'
      },
      {
        name: 'Forms',
        url: '/base/forms',
        icon: 'icon-puzzle'
      },
      {
        name: 'Pagination',
        url: '/base/paginations',
        icon: 'icon-puzzle'
      },
      {
        name: 'Popovers',
        url: '/base/popovers',
        icon: 'icon-puzzle'
      },
      {
        name: 'Progress',
        url: '/base/progress',
        icon: 'icon-puzzle'
      },
      {
        name: 'Switches',
        url: '/base/switches',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tables',
        url: '/base/tables',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tabs',
        url: '/base/tabs',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tooltips',
        url: '/base/tooltips',
        icon: 'icon-puzzle'
      }
    ]
  },
  {
    name: 'Buttons',
    url: '/buttons',
    icon: 'icon-cursor',
    children: [
      {
        name: 'Buttons',
        url: '/buttons/buttons',
        icon: 'icon-cursor'
      },
      {
        name: 'Dropdowns',
        url: '/buttons/dropdowns',
        icon: 'icon-cursor'
      },
      {
        name: 'Social Buttons',
        url: '/buttons/social-buttons',
        icon: 'icon-cursor'
      }
    ]
  },

  {
    name: 'Icons',
    url: '/icons',
    icon: 'icon-star',
    children: [
      {
        name: 'Flags',
        url: '/icons/flags',
        icon: 'icon-star',
        badge: {
          variant: 'success',
          text: 'NEW'
        }
      },
      {
        name: 'Font Awesome',
        url: '/icons/font-awesome',
        icon: 'icon-star',
        badge: {
          variant: 'secondary',
          text: '4.7'
        }
      },
      {
        name: 'Simple Line Icons',
        url: '/icons/simple-line-icons',
        icon: 'icon-star'
      }
    ]
  },
  {
    name: 'Notifications',
    url: '/notifications',
    icon: 'icon-bell',
    children: [
      {
        name: 'Alerts',
        url: '/notifications/alerts',
        icon: 'icon-bell'
      },
      {
        name: 'Modals',
        url: '/notifications/modals',
        icon: 'icon-bell'
      }
    ]
  },
  {
    name: 'Widgets',
    url: '/widgets',
    icon: 'icon-calculator',
    badge: {
      variant: 'info',
      text: 'NEW'
    }
  },
  {
    divider: true
  },
  {
    title: true,
    name: 'Extras',
  },
  {
    name: 'Pages',
    url: '/pages',
    icon: 'icon-star',
    children: [
      {
        name: 'Login',
        url: '/pages/login',
        icon: 'icon-star'
      },
      {
        name: 'Register',
        url: '/pages/register',
        icon: 'icon-star'
      },
      {
        name: 'Error 404',
        url: '/pages/404',
        icon: 'icon-star'
      },
      {
        name: 'Error 500',
        url: '/pages/500',
        icon: 'icon-star'
      }
    ]
  }
];
当我在身份验证后检查isLoggedIn$的值时，我得到“true”，但文件_nav.ts的导航栏总是隐藏的。有什么想法吗

编辑

文件：appSidebar.component.ts：此文件为空，因为开发此模板的人使用了文件app-sidebar-nav.component.ts而不是appSidebar.component.ts来显示导航栏，这就是为什么我在app-sidebar-nav.component.ts中声明变量îsLoggedIn$的原因，因为它在代码中。 但我得到一个警告：上面写着：

在这个文件中，我在“isLoggedIn$”下面得到一条红线，它表示：未定义ng标识符isLoggedIn$，组件声明、模板变量声明和元素引用不包含这样的成员

 <div class="sidebar">
  <app-sidebar-header></app-sidebar-header>
  <app-sidebar-form></app-sidebar-form>
  <app-sidebar-nav *ngIf="isLoggedIn$ | async"></app-sidebar-nav>
  <app-sidebar-footer></app-sidebar-footer>
  <app-sidebar-minimizer></app-sidebar-minimizer>
</div>

您可以在当前试图在其中使用的组件（
app sidebar component.ts
）中定义
isLoggedIn$
变量，也可以将
*ngIf
移动到已定义的组件（
app sidebar nav.component.ts
），如下所示：

app sidebar component.html

<div class="sidebar">
  <app-sidebar-header></app-sidebar-header>
  <app-sidebar-form></app-sidebar-form>
  <app-sidebar-nav></app-sidebar-nav>
  <app-sidebar-footer></app-sidebar-footer>
  <app-sidebar-minimizer></app-sidebar-minimizer>
</div>
我没有看到你为
app sidebar组件.ts
编码，它定义了
isLoggedIn$
（你提供了
app sidebar nav.component.ts
文件，但这是
app sidebar组件所使用的组件）基于你的更新，我很确定我的思路是正确的。您在错误的组件中定义了
isLoggedIn$
（
app sidebar component
应该有它…
app sidebar nav.component
不应该有它）。@DanielWStrimpel:谢谢您的回答，我现在已经编辑了帖子，并解释了为什么我在app-sidebar-nav.component中使用这个变量请看一看，我想隐藏导航栏的原因是我有两个不同的用户，所以我需要两个导航栏，我没有选择，所以我决定隐藏导航栏，如果一切顺利，然后，我将在AuthenticationService上添加条件，以了解谁经过身份验证，以及他应该看到哪个导航栏等。您不能以现有方式定义
isLoggedIn$
。您正在尝试使用来自不同组件的变量。我不知道该怎么说清楚。您需要在正确的类中定义它，或者从错误的组件中删除它的用法，并将其移动到定义它的类的模板中。您对角度模板工作原理的理解不正确。哦，伙计，非常感谢您的帮助，这两种方法对我都很有效，我非常感谢您的帮助！！

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import {
  FullLayoutComponent,
  SimpleLayoutComponent
} from './containers';
import {AuthGuard} from '../service/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'pages',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'GestionClients',
        loadChildren: './views/Admin/GestionClients/client.module#ClientModule'
      },
      {
        path: 'GestionDevloppeurs',
        loadChildren: './views/Admin/GestionDevloppeurs/devloppeur.module#DevloppeurModule'
      },
      {
        path: 'GestionProject',
        loadChildren: './views/Admin/GestionProjects/projet.module#ProjetModule'
      },
      {
        path: 'base',
        loadChildren: './views/base/base.module#BaseModule'
      },
      {
        path: 'buttons',
        loadChildren: './views/buttons/buttons.module#ButtonsModule'
      },
      {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'icons',
        loadChildren: './views/icons/icons.module#IconsModule'
      },
      {
        path: 'notifications',
        loadChildren: './views/notifications/notifications.module#NotificationsModule'
      },
      {
        path: 'theme',
        loadChildren: './views/theme/theme.module#ThemeModule'
      },
      {
        path: 'widgets',
        loadChildren: './views/widgets/widgets.module#WidgetsModule'
      }
    ]
  },
  {
    path: 'pages',
    component: SimpleLayoutComponent,
    data: {
      title: 'Pages'
    },
    children: [
      {
        path: '',
        loadChildren: './views/pages/pages.module#PagesModule',
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}



export const navigation = [
  {
    name: 'Tableau de bord',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    name: 'Clients',
    url: '/GestionClients',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des clients',
        url: '/GestionClients/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un client',
        url: '/GestionClients/ajouter',
        icon: 'icon-puzzle'
      }
      ]
  },
  {
    name: 'Développeurs',
    url: '/GestionDevloppeurs',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des développeurs',
        url: '/GestionDevloppeurs/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un nouveau développeur',
        url: '/GestionDevloppeurs/ajouter',
        icon: 'icon-puzzle'
      }
    ]
  },
  {
    name: 'Projets',
    url: '/GestionProject',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Liste des projets',
        url: '/GestionProject/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'Ajouter un projet',
        url: '/GestionProject/ajouter',
        icon: 'icon-puzzle'
      }

    ]
  },
  {
    name: 'Base',
    url: '/base',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'Cards',
        url: '/base/cards',
        icon: 'icon-puzzle'
      },
      {
        name: 'Carousels',
        url: '/base/carousels',
        icon: 'icon-puzzle'
      },
      {
        name: 'Collapses',
        url: '/base/collapses',
        icon: 'icon-puzzle'
      },
      {
        name: 'Forms',
        url: '/base/forms',
        icon: 'icon-puzzle'
      },
      {
        name: 'Pagination',
        url: '/base/paginations',
        icon: 'icon-puzzle'
      },
      {
        name: 'Popovers',
        url: '/base/popovers',
        icon: 'icon-puzzle'
      },
      {
        name: 'Progress',
        url: '/base/progress',
        icon: 'icon-puzzle'
      },
      {
        name: 'Switches',
        url: '/base/switches',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tables',
        url: '/base/tables',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tabs',
        url: '/base/tabs',
        icon: 'icon-puzzle'
      },
      {
        name: 'Tooltips',
        url: '/base/tooltips',
        icon: 'icon-puzzle'
      }
    ]
  },
  {
    name: 'Buttons',
    url: '/buttons',
    icon: 'icon-cursor',
    children: [
      {
        name: 'Buttons',
        url: '/buttons/buttons',
        icon: 'icon-cursor'
      },
      {
        name: 'Dropdowns',
        url: '/buttons/dropdowns',
        icon: 'icon-cursor'
      },
      {
        name: 'Social Buttons',
        url: '/buttons/social-buttons',
        icon: 'icon-cursor'
      }
    ]
  },

  {
    name: 'Icons',
    url: '/icons',
    icon: 'icon-star',
    children: [
      {
        name: 'Flags',
        url: '/icons/flags',
        icon: 'icon-star',
        badge: {
          variant: 'success',
          text: 'NEW'
        }
      },
      {
        name: 'Font Awesome',
        url: '/icons/font-awesome',
        icon: 'icon-star',
        badge: {
          variant: 'secondary',
          text: '4.7'
        }
      },
      {
        name: 'Simple Line Icons',
        url: '/icons/simple-line-icons',
        icon: 'icon-star'
      }
    ]
  },
  {
    name: 'Notifications',
    url: '/notifications',
    icon: 'icon-bell',
    children: [
      {
        name: 'Alerts',
        url: '/notifications/alerts',
        icon: 'icon-bell'
      },
      {
        name: 'Modals',
        url: '/notifications/modals',
        icon: 'icon-bell'
      }
    ]
  },
  {
    name: 'Widgets',
    url: '/widgets',
    icon: 'icon-calculator',
    badge: {
      variant: 'info',
      text: 'NEW'
    }
  },
  {
    divider: true
  },
  {
    title: true,
    name: 'Extras',
  },
  {
    name: 'Pages',
    url: '/pages',
    icon: 'icon-star',
    children: [
      {
        name: 'Login',
        url: '/pages/login',
        icon: 'icon-star'
      },
      {
        name: 'Register',
        url: '/pages/register',
        icon: 'icon-star'
      },
      {
        name: 'Error 404',
        url: '/pages/404',
        icon: 'icon-star'
      },
      {
        name: 'Error 500',
        url: '/pages/500',
        icon: 'icon-star'
      }
    ]
  }
];



<div class="sidebar">
  <app-sidebar-header></app-sidebar-header>
  <app-sidebar-form></app-sidebar-form>
  <app-sidebar-nav></app-sidebar-nav>
  <app-sidebar-footer></app-sidebar-footer>
  <app-sidebar-minimizer></app-sidebar-minimizer>
</div>



@Component({
  selector: 'app-sidebar-nav',
  template: `
    <nav class="sidebar-nav" *ngIf="isLoggedIn$ | async">
        ...
    </nav>`
})
export class AppSidebarNavComponent implements OnInit {
  isLoggedIn$: Observable<boolean>;
  ...
}