布尔var调用不同形式的变量后返回undefined [英] boolean var returning undefined after calling that variable form different component

问题描述

有2个组件，即标头和登录名.如果loginU的值返回true，那么我想在标题comp中显示注销按钮.在控制台中，其将布尔值显示为标头comp中未定义的布尔值.

There are 2 components i.e header and login. If the value of loginU returns true then I want to show logout button in header comp. In console its showing boolean as undefined in header comp.

登录comp.ts:

  public isloggedin: boolean;

  loginU(e) {
    e.preventDefault();
    console.log(e);
    const username = e.target.elements[0].value;
    const password = e.target.elements[1].value;
    console.log(username, password);


    if (username === 'admin' && password === 'admin') {
      console.log(e);
      this.isloggedin = true;
      this.router.navigate(['/dashboard']);
      return this.isloggedin
    } else {
      this.loginStatus = 'Invalid Username/Password';

    }
  }

header comp:

header comp:

import {LoginComponent} from '../login/login.component';

constructor private _login: LoginComponent) { 

ngOnInit() {
   console.log("From header " +  this._login.isloggedin)
}

header.component.html:

header.component.html:

      <button *ngIf="_login.isloggedin" mat-button (click)="logout()" style="outline:none;margin-left: 5px;float: right;">

 </button> 

推荐答案

使用BehaviorSubject进行

假设我们有这样的 main-container.html :

<div class="container">
  <header-component></header-component>
  <login-component></login-component>
</div>

login.service.ts

login.service.ts

export class LoginService{
  private isLogged$ = new BehaviorSubject<boolean>(null);
  public isLoggedEvent = this.isLogged$.asObservable();

  public setUserLogged(status: boolean){
    this.isLogged$.next(status);
  }
}

login.component.ts

login.component.ts

   //your other stuff

constructor(
  private service: LoginService
) { }
    loginU(e) {
        e.preventDefault();
        console.log(e);
        const username = e.target.elements[0].value;
        const password = e.target.elements[1].value;
        console.log(username, password);


        if (username === 'admin' && password === 'admin') {
          console.log(e);
          this.service.setUserLogged(true);
          this.router.navigate(['/dashboard']);
          return this.isloggedin
        } else {
          this.loginStatus = 'Invalid Username/Password';

        }
      }

header.component.ts

    export class HeaderComponent implements OnInit{

      public isLogged = false;

      constructor(
        private service: LoginService
      ) { }

      ngOnInit: void {
        this.service.isLoggedEvent
        .subscribe( isLogged => {
          this.isLogged = isLogged;
        });
      }

  logout(){
    //your logout stuff
    this.service.setUserLogged(false);
  }

}

header.component.html

header.component.html

 <button *ngIf="isLogged" mat-button (click)="logout()" style="outline:none;margin-left: 5px;float: right;">
 </button> 
 <div *ngIf="!isLogged">User is not logged in</div>

通过这种方式，只要 isLogged $ 的状态更改，您的标头组件就会更新它自己.如果您想在 login.component 上使用 @Input ，请告诉我，我将编辑此答案，向您展示如何操作.

Acting this way, your header component will update itSelf whenever the state of isLogged$ change. If you want to use @Input on the login.component just tell me and I will edit this answer showing you how do it aswell.

这篇关于布尔var调用不同形式的变量后返回undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！