在哪里可以找到用户 JSON object 中的当前用户信息?
Where to find current user info inside the user JSON object?
我正在尝试了解如何获取属于当前 logged-in 用户的某些数据,例如全名、电子邮件等
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()方法返回的Object和this.authService.me()方法返回的Object,但是我无法管理查找任何信息所在的位置。
我注意到 HTML 代码(由 Mean.io 生成器而非我编写的部分)引用了 "user.fullname" 来显示用户的全名header吧,可是怎么办?您将如何访问其他信息,例如用户的电子邮件、phone 号码等?
我的配置文件组件 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 && 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 事件然后像这样访问用户对象
ngOnChanges(){
if(this.user && this.user.fullname){
//Do your work here
}
}
我正在尝试了解如何获取属于当前 logged-in 用户的某些数据,例如全名、电子邮件等
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()方法返回的Object和this.authService.me()方法返回的Object,但是我无法管理查找任何信息所在的位置。
我注意到 HTML 代码(由 Mean.io 生成器而非我编写的部分)引用了 "user.fullname" 来显示用户的全名header吧,可是怎么办?您将如何访问其他信息,例如用户的电子邮件、phone 号码等?
我的配置文件组件 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 && 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 事件然后像这样访问用户对象
ngOnChanges(){
if(this.user && this.user.fullname){
//Do your work here
}
}