Question

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

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

值的理解。

请在这里输入代码：

UserService.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;

  }
}

Menu.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";
    }
  }

}

Menu.html

{{authentucated}}

Answer 1

存在拼写错误：

authentucated = this.user.getUserIsLoggedIn;

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

authenticated = this.user.getUserIsLoggedIn();

否则，您只是将getUserIsLoggedIn的值分配给authenticated，这是一个函数。不过，您确实需要返回值。

此外，您在这里做什么：

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

应该在您留空的ngOnInit中。

menu.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";
    }
  }

}

Answer 2

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

getFunction() {
  return this.otherFunction;
}

如果是这样，您应该尝试：

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

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

更新：毫无疑问，您正在存储服务的函数getUserIsLoggedIn（）而不带括号，这就是您存储函数而不是其返回值的原因。更改此行：

authentucated = this.user.getUserIsLoggedIn;

为此：

authentucated = this.user.getUserIsLoggedIn();

Angular 6返回函数代码而不是结果

2 个答案: