如何在 Angular 10 的 Angular 组件中显示数据？

Question

I'm starting with Angular 10 and I want to put the current user in the profile.component.html and the navbar in app.component.html. Here is the code.

users.ts

export interface User {
    username : string
    password: string
    edad: number
    fechaNacimiento: string
    createdAt?: string
    updatedAt?: string
    id?:number
}

login.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { UsersService } from 'src/app/services/users.service';


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

  constructor(
    public usersServices: UsersService,
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  login(form: NgForm){
    this.usersServices.login(form.value).subscribe(
      res => {
        console.log(res);
        localStorage.setItem('token',res['token']);
        this.router.navigate(['/profile',form.controls['username'].value],{
          state:{username:form.controls['username']}
        });
      },
      err => {
        console.log(err)
      }
    )
  }


}

profile.component.ts

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../../services/users.service';
import { NgForm } from '@angular/forms';
import { User } from 'src/app/models/users';
import { ActivatedRoute } from '@angular/router';


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

  constructor(public usersService: UsersService,private route: ActivatedRoute) { 
    this.route.params.subscribe(username => {
      console.log(username);
    })
  }

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers(){
    this.usersService.getUsers().subscribe(
      res => {
        this.usersService.user = res
      },
      err => console.log(err)
    )
  }

  
  deleteUser(id:number){
    if(confirm('Are  you sure you want to delete it?')){
      this.usersService.deleteUser(id).subscribe(
        (res) => {
          this.getUsers();
        },
        (err) => console.log(err)
      );
    }

  }

  updateUser(form: NgForm){
    this.usersService.editUser(form.value).subscribe(
      res => console.log(res),
      err => console.log(err)
    );
  }
}

<div class="col-md-8">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Username</th>
                <th>Age</th>
                <th>Birthdate</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of usersService.user">
                <td>{{user.username}}</td>
                <td>{{user.edad}}</td>
                <td>{{user.fechaNacimiento}}</td>
                <td>
                    <button class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#staticBackdrop">
                        <i class="material-icons">edit</i>
                    </button>
                    <button class="btn btn-danger btn-sm" (click)="deleteUser(user.id)">
                        <i class="material-icons">delete</i>
                    </button>
                 </td>
        </tbody>
    </table>
</div>

app.component.html

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MEAN Users</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="/profile" routerLinkActive = "active">Profile</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <ng-container *ngIf="!usersService.loggedIn(); else loggedIn">
        <li class="nav-item">
          <a class="nav-link" routerLink="/register" routerLinkActive = "active">Signup</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/login" routerLinkActive = "active">Signin</a>
        </li>
      </ng-container>
      <ng-template #loggedIn>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"  data-toggle="dropdown"  role="button" style="cursor: pointer;"></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" (click)="usersService.logout()">Logout</a>
          </div>
        </li>
      </ng-template>

    </ul>
  </div>
</nav>

<div class="container p-5">
  <router-outlet></router-outlet>
</div>

I want to put a single user in the navbar from app.component.html and profile.component.html but i don't know how to do it.

Beforehand thank you very much.

Answer 1

The problem is not much clear to me, but I think this may help you. It is better to create an authentication service. The authentication service is used to login & log out, it notifies other components when the user logs in & out, and allows access the currently logged in user.

RxJS Subjects and Observables are used to store the current user object and notify other components when the user logs in and out of the app. Angular components can subscribe() to the public currentUser: Observable property to be notified of changes, and notifications are sent when the this.currentUserSubject.next() method is called in the login() and logout() methods, passing the argument to each subscriber.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from '@app/_models';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<User>;
    public currentUser: Observable<User>;
    apiUrl: string;

    constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
    }

    public get currentUserValue(): User {
        return this.currentUserSubject.value;
    }

    login(username: string, password: string) {
        return this.http.post<any>(`${this.apiUrl}/users/authenticate`, { username, password })
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }
}

you can use the current user like this

currentUser: User;

constructor(
    private authenticationService: AuthenticationService
) {
    this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
}

if the current user is undefined, you can navigate to again login page. if not you can display the current user.