0

我知道这个问题的变体之前已经被问过数百万次，但我似乎无法解决我的问题。

所以我正在制作一个会计网站，我的问题是我似乎无法隐藏登录页面的顶部导航栏，并且仍然将其保留在我的所有其他页面/路线上：

我在 app.component.html 中调用导航栏组件，以便它显示在我的所有页面上：

(app.component.html)

<app-navbar>
<router-outlet>

登录页面具有简单的身份验证，因为我仍在制作模板，最终用户名和密码将来自后端数据库。

登录页面 ts 文件如下所示：

export class LoginComponent implements OnInit {
    emailFormControl = new FormControl('', [Validators.required,
    Validators.pattern(EMAIL_REGEX)]);
    UserName = new FormControl('', [Validators.required]);
    password = new FormControl('', [Validators.required]);

    constructor(private router: Router) { }
    ngOnInit() {

    }
    loginUser(e) {
        e.preventDefault();
        console.log(e);
        const username = e.target.elements[0].value;
        const password = e.target.elements[1].value;
        if (username === 'admin' && password === 'admin') {
            // this.user.setUserLoggedIn();
            this.router.navigate(['accounts']);
        }
    }
}

我还有一个用户服务：

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

    private isUserLoggedIn;
    public username;

    constructor() {
        this.isUserLoggedIn = false;
    }

    setUserLoggedIn() {
        this.isUserLoggedIn = true;
        this.username = 'admin';
    }

    getUserLoggedIn() {
        return this.isUserLoggedIn;
    }
}

我已经看到有关 Auth 等的答案，但我似乎无法围绕我的代码来塑造答案。

如何隐藏登录页面上的导航栏？

我将不胜感激。谢谢

编辑

这是 Dhyey 要求的路由文件：

    import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './Components/admin/admin.component';
import { AccountsComponent } from './Components/accounts/accounts.component';
import { MappingComponent } from './Components/mapping/mapping.component';

const appRoutes: Routes = [
  { path: '',
  pathMatch: 'full',
  redirectTo: 'login' },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'admin',
    component: AdminComponent
  },
{
  path: 'accounts',
  component: AccountsComponent
},
{
  path: 'mapping',
  component: MappingComponent
},
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}
// export const routingComponents = [MappingComponent, AccountsComponent, AdminComponent, LoginComponent];

编辑 2 这是 app.component.ts 文件

import { Component } from '@angular/core';
import {FormControl} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { UserService } from './services/user.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'app';
  myControl: FormControl = new FormControl();

}
4

2 回答 2

0

您可以通过您的getUserLoggedIn方法检查用户是否已登录：

首先你需要UserService注入app.component.ts：

constructor(public userService: UserService ) { }

然后在你的html中：

<app-navbar *ngIf="userService.getUserLoggedIn()">
<router-outlet>

这样只有当isUserLoggedIn为真时，app-navbar才会显示

于 2017-11-07T09:51:52.113 回答
0

您还可以做的是让您的菜单在应用程序组件中（这不是问题），并使用路由条件来显示或不显示它。

为此，Angular 提供了 ActivatedRoute 从当前路由 url https://angular.io/api/router/ActivatedRoute获取信息

  • 导入 ActivatedRoute 或 Route 也应该没问题
  • 注入组件

使用构造函数：

constructor (private activatedRoute: ActivatedRoute / Route) { 
     this.currentPage = activatedRoute.url;
    }
  • 然后检查 onInit 如下所示的路线信息

if (this.curentPage === 'admin') { this.displayMenu = false; }

  • 最后，使用你的<div class="menu" *ngIf="! displayMenu">...</div>
于 2017-11-07T13:46:25.240 回答