以角度在两个组件之间发出属性值

Question

I have two angular components Login and navbar and in my app.component.html in do this

app.component.html

    <app-nav-bar></app-nav-bar>
    <router-outlet></router-outlet>
    navbar.component.html
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <h3 [style.color]="'white'">Admin Portal</h3>
        <div class="parent">
          <div class="children right-children">
              <div class="child" [hidden]="!loggedIn"><a mat-flat-button style="cursor: pointer;">Logout</a></div>
         </div>
        </div>
      </mat-toolbar-row>
    </mat-toolbar>

navbar.component.ts

    export class NavBarComponent implements OnInit {
    
      loggedIn = false;
    
      constructor(private loginService:LoginService) {}
    
      ngOnInit(): void {}
    
      toggleDisplay() {
        this.loggedIn = !this.loggedIn;
      }
    }

I want to emit the value of loggedIn property to navbar component when in the login component the user login successfully and display logout button which hidden.

login.component.html

    <div class="container">
      <div [hidden]="loggedIn">
        <mat-grid-list cols="6" [style.margin-top]="'20px'">
          <mat-grid-tile [colspan]="1"></mat-grid-tile>
          <mat-grid-tile [colspan]="4">
            <form (ngSubmit)="onSubmit()">
              <mat-form-field class="example-full-width">
                <mat-label>Username</mat-label>
                <input
                  type="text"
                  matInput
                  [(ngModel)]="credential.username"
                  name="username"
                  id="username"
                  placeholder="Your Username"
                />
              </mat-form-field>
    
              <mat-form-field class="example-full-width">
                <mat-label>Password</mat-label>
                <input
                  type="password"
                  matInput
                  [(ngModel)]="credential.password"
                  name="password"
                  id="password"
                  placeholder="Your Password"
                />
              </mat-form-field>
              <button mat-raised-button type="submit" class="mat-primary">
                Login
              </button>
            </form>
          </mat-grid-tile>
        </mat-grid-list>
      </div>
      <div [hidden]="!loggedIn">
        <h2>You have logged in!</h2>
    </div>
    </div>

login.component.ts

    export class LoginComponent implements OnInit {
    
       credential = {'username':'', 'password' : ''};
       loggedIn = false;
    
      constructor(private loginService: LoginService) { }
    
      onSubmit() {
        this.loginService.login(this.credential.username, this.credential.password).subscribe(
            res => {
            let obj: MyObj = JSON.parse(JSON.stringify(res));
            localStorage.setItem("xAuthToken", obj.token);
                this.loggedIn = true;
            },
            error => {
                console.log(error);
            }
        );
      }
    
      ngOnInit() {
        this.loginService.checkSession().subscribe(
            res => {
            this.loggedIn=true;
            },
            error => {
            this.loggedIn=false;
            }
        );
      }
    }

I want when the logged property has the true value that this can be passed to the navbar component and make the logout button visible. I don't know how to transmit this data between the login component and the navbar.

Answer 1

you are already saving your token n localStorage in your login like this

localStorage.setItem("xAuthToken", obj.token);

So in your nav.component.ts just do this

loggedIn: boolean = false;

ngOnInit(){
   this.loggedIn = localStorage.getItem('xAuthToken') ? true : false; 
   // it will be false token will not be there in local storage
}

and then in your navbar.component.html just do this

<div class="children right-children">
      <div class="child" *ngIf="loggedIn"><a mat-flat-button style="cursor: pointer;">Logout</a></div>
</div>

Answer 2

通常的方法是使用带有 rxjs 主题的共享服务：您的登录组件在那里设置数据并且导航栏订阅更改