0

我想知道如何在用户身份验证中显示或隐藏我的菜单，因为我创建了一个经过身份验证的 var 和一个函数，如果连接，它会更改它的值，但是当我调用它返回的函数时：

function () { console.log(this.userIsLoggedIn); return this.userIsLoggedIn; }

价值观的介入。

请在这里提供代码：

用户服务.ts

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private userIsLoggedIn;
  constructor() { 
     this.userIsLoggedIn = false;
  }

  setUserIsLoggedIn() {
    this.userIsLoggedIn = true;
  }

  getUserIsLoggedIn(){
    console.log(this.userIsLoggedIn);
    return this.userIsLoggedIn;

  }
}

菜单.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {


  constructor(private user : UserService) { }

  ngOnInit() {
  }

  menuIndex = 1;
  accueilClassValue = "nav-item nav-link active";
  proposeClassValue = "nav-item nav-link";
  chercheClassValue = "nav-item nav-link";
  authentucated = this.user.getUserIsLoggedIn;


  ChangeActiveMenu(index : number){
    this.menuIndex = index;

    if (this.menuIndex==1){
      this.accueilClassValue = "nav-item nav-link active";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==2){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link active";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==3){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link active";
    }
  }

}

菜单.html

{{authentucated}}
4

2 回答 2

3

有拼写错误：

authentucated = this.user.getUserIsLoggedIn;

首先这应该是authenticated。其次，您可能想要调用该函数：

authenticated = this.user.getUserIsLoggedIn();

否则，您只是分配getUserIsLoggedInto的值authenticated，这是一个函数。你真的想要返回值。

另外，你在这里做什么：

menuIndex = 1;
accueilClassValue = "nav-item nav-link active";
proposeClassValue = "nav-item nav-link";
chercheClassValue = "nav-item nav-link";
authentucated = this.user.getUserIsLoggedIn;

可能应该在ngOnInit你留空的地方。

菜单.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  public authenticated: boolean;
  public menuIndex: number;
  ...

  constructor(private user : UserService) { }

  ngOnInit() {
    this.menuIndex = 1;
    accueilClassValue = "nav-item nav-link active";
    proposeClassValue = "nav-item nav-link";
    chercheClassValue = "nav-item nav-link";
    authenticated = this.user.getUserIsLoggedIn();
  }


  ChangeActiveMenu(index : number){
    this.menuIndex = index;

    if (this.menuIndex==1){
      this.accueilClassValue = "nav-item nav-link active";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==2){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link active";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==3){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link active";
    }
  }

}
于 2018-08-02T10:53:56.147 回答
2

我认为在代码中你没有向我们展示你正在做类似的事情：

getFunction() {
  return this.otherFunction;
}

如果是这种情况，您应该尝试：

getFunction() {
  return this.otherFunction();
}

注意括号。这样 javascript 将执行函数并返回他的值，而不是函数本身

更新：毫无疑问，您存储的服务函数 getUserIsLoggedIn() 没有括号，这就是您存储函数而不是返回值的原因。更改此行：

authentucated = this.user.getUserIsLoggedIn;

对于这个：

authentucated = this.user.getUserIsLoggedIn();
于 2018-08-02T10:53:40.560 回答