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

Question

我想知道如何在用户身份验证中显示或隐藏我的菜单，因为我创建了一个经过身份验证的 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}}

标签： angulartypescript

Answer 1

有拼写错误：

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

}