Question

我有一个包含用于身份验证的formGroup的组件，我希望在用户登录后动态地在导航栏上显示用户登录电子邮件。我对Angular很新，我找不到有关formGroup的任何问题

这是LoginComponent.html：

  <div class = "row">
   <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <h3>Sign In </h3>
     <form [formGroup]="myForm" (ngSubmit)="onSignin()" >
        <div class="form-group">
            <label for="email">E-Mail</label>
            <input
             type="email"
             id="email"
             name="email"
             class="form-control"
             formControlName="email">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input
             name="password"
             type="password"
             id="password"
             class="form-control"
             formControlName="password">
        </div>
        <br>
      <button
       class="btn btn-success"
       type="submit"
      [disabled]="!myForm.valid"
       >Sign In</button>
        <br>
        <hr>
      <label>ForgotPassword</label>
    </form>
</div>

和LoginComponent.ts：

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

import { FormBuilder, FormGroup, Validators, NgForm } from     "@angular/forms";
import { AuthService } from "./auth/auth.service";
import { Router } from '@angular/router';
import { Subscription } from "rxjs/Rx";
import { User } from "../login/user.interface";
import { NavbarComponent } from '../navbar/navbar.component';

 @Component({
moduleId: module.id,
selector: 'login',
templateUrl: 'login.component.html',
styleUrls: [ 'login.component.css']
             })
export class LoginComponent implements OnInit{

@Input() myForm: FormGroup;
isAuthenticated = false;
private subscription: Subscription;
test1= false;
constructor(private fb: FormBuilder, private authService: AuthService, private router: Router){
this.subscription = this.authService.isAuthenticated().subscribe(
      authStatus => this.isAuthenticated = authStatus
    );
   }

onSignin() {
 this.authService.signinUser(this.myForm.value)
 this.router.navigate[('customer')];
  if (this.isAuthenticated){
alert("Login Successful ");
this.router.navigate(['customer']);
    }else{
    this.reset();
    }
  //routes the user after they have been authenticated
  }
 isAuth(){
  return this.isAuthenticated
       }

 ngOnInit() {
  this.myForm = this.fb.group({
    email: ['', Validators.required],
    password: ['', Validators.required],
    });

  }

reset(){
this.myForm.reset();
   }
 ngOnDestroy(){

 this.subscription.unsubscribe();
 }
}

界面：

export interface User {
email: string;
password: string;
   }

导航栏html：

     <li class="nav navbar-nav navbar-right nav-item dropdown">
       <a href="#"
        class="dropdown-toggle nav-link"
        id="nav-dropdown"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        *ngIf="isAuth()">
        {{getEmail()}}
      </a>
        <ul class="dropdown-menu" aria-labelledby="nav-dropdown">
          <a class="dropdown-item"
          (click)="onLogout()"
          style="cursor: pointer;"
          >Log Out</a>
       </ul>
     </li>

从导航栏组件调用的方法：

 getEmail(user: User){
  //console.log(user.email.valueOf)
  this.test = "test"
  return this.test
 }

我试图使用界面，但我不知道这是否是最佳方法。此外，我很可能在登录组件中有不必要的导入，但它都是实验性的。

Answer 1

最简单的方法是在身份验证之后使用用户信息设置本地存储，如

localStorage.setItem(email,'user_email'); //或者您可以存储所有用户信息

getMail() : void
{
   this.email=localStorage.getItem("user_email'");
}

从一个formGroup中获取一个特定值，以便在Angular中的另一个组件中调用

1 个答案: