Изменить содержимое NavBar в Angular на основе условия ngIf

Question

Я новичок в Angular и Node JS.Я пытаюсь простое изменение панели навигации в зависимости от состояния ngIf.Тем не менее, это не похоже на работу.

Я уже пробовал использовать статические переменные-члены.

Кроме того, попытался создать метод, который изменяет значение isUserAuthenticated в navbar.component и вызывает методы как в homepage.component, так и в dashboard.component.

Я также сделал console.log() и проверил значение переменной isUserAuthenticated.Он обновляется как для homepage.component, так и для dashboard.component.Тем не менее, NavBar всегда остается неизменным.

Я изменил значение непосредственно в 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>

navbar.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;
  }
}

homepage.component.ts

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());
  }
}

dashboard.component.ts

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 отображал "EX TRUE" в NavBar и компонент homepageпоказывает «EX FALSE» в NavBar.

Answer 1

Как уже упоминалось в комментарии, вам нужно создать сервис для аутентификации проверьте это для полного примера

@Injectable()
export class AuthenticationService {
  authenticated$: BehaviorSubject<boolean> = new BehaviorSubject(false);

  public authenticate() {
    this.authenticated$.next(true);
  }

  public deauthenticate() {
    this.authenticated$.next(false);
  }
}

вы вводите его таким образом, чтобы иметь возможность использовать его в шаблоне

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

import { AuthenticationService } from '../authentication/authentication.service';

@Component({
  selector: 'my-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: [ './navbar.component.css' ]
})
export class NavbarComponent {
  constructor(
    public authenticationService: AuthenticationService,
  ) {
  }
}

, а затем в шаблоне вы можете сделать это

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>

Хотя я бы предложил использовать ngSwitch в этом случае так:

<div>
  <li class="nav-item" [ngSwitch]="authenticationService.authenticated$ | async">
    <a class="nav-link" href="/" *ngSwitchCase="true">EX TRUE</a>
    <a class="nav-link" href="/" *ngSwitchDefault>EX FALSE</a>
  </li>
</div>

Также, если вы хотите отдельное состояниедля некоторых частей вашего сайта вы можете сделать это так:

@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,
  ) {
  }
}

Answer 2

Это не так, как все устроено для работы.Для этого сценария необходимо создать Service, например AuthService, которое будет совместно использоваться обоими компонентами.

AuthEventSvc

export class AuthEventSvc{

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

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

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

}

, а затем отправьте из HomeComponent

export class HomepageComponent implements OnInit {

  constructor(private authEvent: AuthEventSvc ) {

  }

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

и подпишитесь на NavBarComponent

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, чтобы получить больше ясности, поскольку эти темы требуют длинной статьи для объяснения.Я просто даю тебе крошки, чтобы лучше понять:)