时间戳

首页 > 解决方案 > 用户以角度登录后显示侧边栏和仪表板组件

angular - 用户以角度登录后显示侧边栏和仪表板组件

问题描述

我想在用户成功登录时显示仪表板和侧边栏组件。目前我的侧边栏组件和仪表板组件只有在我刷新页面后才会加载。

我尝试导航 this.router.navigateByUrl('/dashboard'); 用户成功登录 onClickSubmit 功能后

onClickSubmit() {
    this.isValidFormSubmitted = false;
     if (this.loginForm.invalid) {
        this.formErrorSubmit = true; 
        return;
     }
     this.isValidFormSubmitted = true;
     this.router.navigateByUrl('/dashboard');
    //  this.loginForm.reset();
  }

html文件

<div id="main" class="page-wrapper" [ngClass]="{'toggled' : getSideBarState()}">
    <app-sidebar></app-sidebar>
    <main class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <router-outlet></router-outlet>
                </div>
            </div>

        </div>
        <!-- <div class="overlay" (click)="toggleSidebar()" [ngClass]="{'show' : !getSideBarState()}"></div> -->
    </main>
</div>

路由文件

const routes: Routes = [
  {path: '', component:LoginComponent},
  {path: 'dashboard', component:DashboardComponent},
  {path: 'calendar', component:CalendarComponent},
];

侧边栏服务

toggled = false;
 toggle() {
    this.toggled = ! this.toggled;
  }

  getSidebarState() {
    return this.toggled;
  }

成功登录后应显示仪表板和侧边栏组件。

标签： angular

解决方案

使用角度路由作为以下示例。为此，您必须创建一个路由功能。

  constructor(private customerService: CustomerService, private router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    const redirectUrl = route['_routerState']['url'];

    if (this.customerService.isLogged()) {
      return true;
    }

    this.router.navigateByUrl(
      this.router.createUrlTree(
        ['/login'], {
          queryParams: {
            redirectUrl
          }
        }
      )
    );

    return false;
  }

然后在你的 component.ts 文件中给出路由路径如下，

this.isValidFormSubmitted = true;
 this.router.navigateByUrl('/dashboard');

进一步遵循这个例子。如果您有任何问题，请随时在下面发表评论。谢谢！

推荐阅读