Блог

Я пытаюсь выяснить, как получить определенные данные, принадлежащие текущему зарегистрированному пользователю, такие как полное имя, адрес электронной почты и т.д.

Консоль Firefox выводит следующее:

 ----- header.component.ts -----
this.user:
{}
authService.getUser()
Object { _isScalar: false, source: {…} }
this.authService.me()
Object { _isScalar: false, _subscribe: me() }
-------------------------------
  

Это выводит то, что AuthService может предоставить с помощью console.log() (см. Код TypeScript ниже).

Я просматриваю объект, возвращаемый методом AuthService.getUser(), а также объект, возвращаемый this.authService.me () метод, но мне не удается найти, где находится какая-либо информация.

Я заметил в HTML-коде (в части, которая была сделана Mean.io генератор, а не мной), что он ссылается на «user.fullname» для отображения полного имени пользователя в строке заголовка, но как? И как бы вы получили доступ к другим частям информации, таким как электронная почта пользователя, номер телефона и т. Д.?

Мой файл TypeScript компонента профиля выглядит следующим образом:

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

import { AuthService } from '../auth/auth.service';

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

  @Input() user: any = {};

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }

  ngOnInit() {
    console.log("----- header.component.ts -----");
    console.log("this.user:");
    console.log(this.user);
    console.log("-------------------------------");
  }

  profile(): void {
    this.navigate('/profile');
  }

  logout(): void {
    this.authService.signOut();
    this.navigate('/auth/login');
  }

  navigate(link): void {
    this.router.navigate([link]);
  }

}
  

И мой HTML-файл компонента профиля выглядит следующим образом:

 <header >
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=ZCOOL XiaoWei" rel="stylesheet">

  <mat-toolbar color="primary">
    <a [routerLink]="['/']" class="logo"></a>
    <a [routerLink]="['/']" class="toolbar-buttons"> Home </a>
    <a class="toolbar-buttons"> Deals </a>
    <a [routerLink]="['/about']" class="toolbar-buttons"> About </a>

    <span class="example-spacer"></span>
    <a class="links side" [routerLink]="['/auth/login']" *ngIf="!user">Login</a>
    <div>
      <a class="links side" *ngIf="user" [matMenuTriggerFor]="menu">
        <mat-icon>account_circle</mat-icon>{{user.fullname}}
      </a>
      <mat-menu #menu="matMenu">
        <button mat-menu-item *ngIf="user amp;amp; user.isAdmin" [routerLink]="['/admin']">admin</button>
        <button mat-menu-item (click)="logout()">logout</button>
        <button mat-menu-item (click)="profile()">profile</button>
      </mat-menu>
    </div>
  </mat-toolbar>
</header>

  

Оказывается, пользователь не установлен мгновенно, он ожидает некоторого ответа ajax, вы можете использовать событие ngOnChanges, а затем получить доступ к объекту user следующим образом

 ngOnChanges(){
   if(this.user amp;amp; this.user.fullname){
      //Do your work here
   }
}