Node.js 根据ngIf条件更改角度导航栏的内容

我是Angular和Node JS的初学者。我正在尝试一个基于ngIf条件的简单导航栏更改。然而，它似乎不起作用

我已经尝试过使用静态成员变量

另外，尝试在

navbar.component

中创建更改

isUserAuthenticated

值的方法，并在

homepage.component

以及

dashboard.component

中调用方法

我还完成了

console.log（）

并检查了

isUserAuthenticated

变量的值。它正在

主页.component

和

仪表板.component

上更新。但是，导航栏始终保持不变

我直接在navbar.component中更改了值，然后它就可以工作了。因此，我在想，如果我更改其他组件的值，为什么它不起作用

navbar.component.html

       <div *ngIf="!isUserAuthenticated">
          <li class="nav-item">
            <a class="nav-link" href="/"> EX FALSE </a>
          </li>
        </div>

        <div *ngIf="isUserAuthenticated">
          <li class="nav-item">
            <a class="nav-link" href="/"> EX TRUE </a>
          </li>
        </div>

homepage.component.ts

import { Component, OnInit } from '@angular/core';

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

  isUserAuthenticated = true;

  constructor() { }

  ngOnInit() { }

  public authenticate() {
    this.isUserAuthenticated = false;
    return  this.isUserAuthenticated;
  }
  public deauthenticate() {
    this.isUserAuthenticated = true;
    return  this.isUserAuthenticated;
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from '../navbar/navbar.component';


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

  constructor( ) {

  }

  ngOnInit() {

    console.log("here");
    this.deauthenticate();


  }

  public deauthenticate()
  {
    const comp2 = new NavbarComponent();
    comp2.deauthenticate();
    console.log(comp2.deauthenticate());
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from '../navbar/navbar.component';



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

  constructor( ) {
  }

  ngOnInit() {

    this.authenticate();
  }

  public authenticate()
  {
    const comp2 = new NavbarComponent();
    comp2.authenticate();
    console.log(comp2.authenticate());
  }

}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

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

  isUserAuthenticated = true;

  constructor() { }

  ngOnInit() { }

  public authenticate() {
    this.isUserAuthenticated = false;
    return  this.isUserAuthenticated;
  }
  public deauthenticate() {
    this.isUserAuthenticated = true;
    return  this.isUserAuthenticated;
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from '../navbar/navbar.component';


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

  constructor( ) {

  }

  ngOnInit() {

    console.log("here");
    this.deauthenticate();


  }

  public deauthenticate()
  {
    const comp2 = new NavbarComponent();
    comp2.deauthenticate();
    console.log(comp2.deauthenticate());
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from '../navbar/navbar.component';



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

  constructor( ) {
  }

  ngOnInit() {

    this.authenticate();
  }

  public authenticate()
  {
    const comp2 = new NavbarComponent();
    comp2.authenticate();
    console.log(comp2.authenticate());
  }

}

---

我希望

仪表板

组件在导航栏中显示“EX TRUE”，而

主页

组件在导航栏中显示“EX FALSE”。

这不是设计工作的方式。对于这个场景，您需要创建一个

服务

，例如

AuthService

，它将在两个组件之间共享

AuthEventSvc

export class AuthEventSvc{

   private authEvent = new BehaviorSubject<boolean>(true);
   constructor(){}

   emitAuthStatus(state: boolean){
     this.authEvent.next(state);
   }

   authListener(){
     return this.authEvent.asObservable();
   }

}

并在NavBarComponent中订阅

export class HomepageComponent implements OnInit {

  constructor(private authEvent: AuthEventSvc ) {

  }

  ngOnInit() {
    this.authEvent.emitAuthStatus(false);
  }
}

export class NavbarComponent implements OnInit {

  isUserAuthenticated = true;
  authSubscription : Subscription;

  constructor(private authEvent: AuthEventSvc) { }

  ngOnInit() { 
    this.authSubscription = this.authEvent.authListener().subscribe(state => {
      this.isUserAuthenticated = state;
    })
  }

  ngOnDestroy(){
    this.authSubscription.unsubscribe(); // make sure to unsubscribe
  }

}

---

您还应该阅读

NgZone

如何在Angular中使用，以获得更清晰的信息，因为这些主题需要一篇长文章进行解释。我只是给你们一些面包屑来帮助你们更好地理解：）

正如评论中提到的，你们需要创建认证服务

然后在模板中，您可以这样做

Authenticated {{ authenticationService.authenticated$ | async }}

<div *ngIf="(authenticationService.authenticated$ | async) === true">
  <li class="nav-item">
    <a class="nav-link" href="/">EX TRUE</a>
  </li>
</div>

<div *ngIf="(authenticationService.authenticated$ | async) === false">
  <li class="nav-item">
    <a class="nav-link" href="/">EX FALSE</a>
  </li>
</div>

<button (click)="authenticationService.authenticate()">Authenticate</button>
<button (click)="authenticationService.deauthenticate()">Deauthenticate</button>

---

您应该使用一些服务来管理身份验证状态，并创建不属于呈现视图一部分的新组件。这就是为什么您的方法调用不做任何事情。这个问题现在看起来不同了。您希望身份验证的状态为全局状态，还是仅显示每个位置的局部状态？谢谢您的回答。它现在正在工作。我对你的答案投了赞成票，并认为正确。再次非常感谢你。非常感谢你的帮助。我对Angular和NodeJS不太熟悉，所以你的解释会帮助我更好地理解。您能告诉我在哪里创建AuthService吗。它是一个组件吗？@harshpamnani

AuthService

是一个服务（

component

是不同的东西）。我强烈建议您熟悉

angular

的基本功能。在创建所有其他组件的同一模块中创建此服务。请确保将

@Injectable

和所有内容都放进去使用它。我曾经在探索

angular

时创建了一个git回购。看看它是否对你也有帮助：）干杯，当然。非常感谢您的快速回复。我一定会看一看git回购协议，标记并投票决定答案。再次感谢，非常感谢。我快到了。它正在使用您提供的导航栏。请告诉我如何在*ngIf中引用

authenticationService.authenticated$

。例如，我想做如下操作：

对于ngIf，它将是

*ngIf=“（authenticationService.authenticated$| async）==true”

或false在其他情况下，我还添加了ngSwitch的示例，在这种双值情况下应该会更好，请刷新我的回答。它现在正在工作。非常感谢你。这真的很有帮助。我将尝试学习这种角度的基本概念。我已经在示例中添加了更多的描述，如果有任何不清楚的地方，您可以查看更新的版本

@Component({
  selector: 'my-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: [ './homepage.component.css' ],
  // this way you have a separate instance of AuthenticationService here anything that will use this service and is rendered under this component will use a localized version of this service
  providers: [AuthenticationService],
})
export class HomepageComponent {
  constructor(
    public authenticationService: AuthenticationService,
  ) {
  }
}