我想将用户ID存储在sessionStorage中,并在blogcomponent中获取如何获取,请帮助我。
loginComponente.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NgFlashMessageService } from 'ng-flash-messages';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationServiceService } from '../_services';
import { AlertService } from '../_services';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
msg: string = null;
loading = false;
submitted = false;
returnUrl: string;
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
public router: Router,
public flashMessageService: FlashMessagesService,
private authenticationService: AuthenticationServiceService,
private alertService: AlertService) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
if (!this.authenticationService.setLoginStatus) {
this.router.navigate(['login']);
}
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['/'] || '/';
}
get f() { return this.loginForm.controls; }
onSubmit() {
// if form valid then call authentication API
if (this.loginForm.valid) {
this.submitted = true;
// this.loading = true;
this.authenticationService.login(this.f.email.value,
this.f.password.value)
.pipe(first())
.subscribe(
data => {
if (data.status === false) {
alert("Please enter valid Email Or Password");
this.router.navigate(['login']);
this.authenticationService.setLoginStatus(0);
}
else {
this.flashMessageService.show('You have successfully logged in',
{ cssClass: 'alert-success', timeout: 3000 });
this.router.navigate(['blog-list']);
sessionStorage.setItem('currentUser',data.id);
var users = sessionStorage.getItem('currentUser');
// console.log("You have successfully logged in");
console.log(users);
}
},
error => {
this.alertService.error(error);
this.loading = false;
});
}
}
}
我想在ngoninit函数中的博客列表componenet中获取登录用户ID是getUserBlogById(),但如何在getUserBlogid()中获取ID却给出了错误,请帮助我。
blog-list.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { UserService } from '../_services';
import { User } from '../_models'
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthenticationServiceService } from '../_services';
@Component({
selector: 'app-blog-list',
templateUrl: './blog-list.component.html',
styleUrls: ['./blog-list.component.css']
})
export class BlogListComponent implements OnInit, OnDestroy {
currentUser: User;
msg: string = null;
id: number;
currentUserSubscription: Subscription;
users: User[] = [];
constructor(
public router: Router,
public flashMessageService: FlashMessagesService,
private authenticationService: AuthenticationServiceService,
private userService: UserService
) {
this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
this.currentUser = user;
});
}
ngOnInit() {
this.getUserBlogById(1);
}
ngOnDestroy() {
// unsubscribe to ensure no memory leaks
this.currentUserSubscription.unsubscribe();
}
deleteUser(id: number) {
this.userService.delete(id).pipe(first()).subscribe(() => {
//this.getUserBlogById(this.id);
this.flashMessageService.show('Blog deleted successfully.',
{ cssClass: 'alert alert-danger alert-dismissible fade in', timeout: 3000 });
});
}
private getUserBlogById(id:number) {
this.userService.getAll(id).pipe(first()).subscribe(users => {
this.users = users;
});
}
}
如何在blog-list.component中使用sessionStorage值,我想显示已登录用户的博客,请帮助我如何解决此类问题。预先谢谢你...
答案 0 :(得分:1)
您可以访问 loginComponente.ts
中设置的ngOnInit()生命周期挂钩中的会话存储项。blog-list.component.ts
ngOnInit() {
//here you can access your sessionstorage item like
let currentUserId= sessionStorage.getItem('currentUser');
this.getUserBlogById(currentUserId);
}
答案 1 :(得分:1)
第一件事是您的登录组件中,您需要在会话存储中添加项目,然后再进一步重定向;
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NgFlashMessageService } from 'ng-flash-messages';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationServiceService } from '../_services';
import { AlertService } from '../_services';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
msg: string = null;
loading = false;
submitted = false;
returnUrl: string;
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
public router: Router,
public flashMessageService: FlashMessagesService,
private authenticationService: AuthenticationServiceService,
private alertService: AlertService) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required],
});
if (!this.authenticationService.setLoginStatus) {
this.router.navigate(['login']);
}
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['/'] || '/';
}
get f() { return this.loginForm.controls; }
onSubmit() {
// if form valid then call authentication API
if (this.loginForm.valid) {
this.submitted = true;
// this.loading = true;
this.authenticationService.login(this.f.email.value,
this.f.password.value)
.pipe(first())
.subscribe(
data => {
if (data.status === false) {
alert("Please enter valid Email Or Password");
this.router.navigate(['login']);
this.authenticationService.setLoginStatus(0);
}
else {
this.flashMessageService.show('You have successfully logged in',
{ cssClass: 'alert-success', timeout: 3000 });
sessionStorage.setItem('currentUser',data.id);
var users = sessionStorage.getItem('currentUser');
// console.log("You have successfully logged in");
console.log(users);
this.router.navigate(['blog-list']);
}
},
error => {
this.alertService.error(error);
this.loading = false;
});
}
}
}
关于您其他组件的Onint生命周期挂钩如下:
ngOnInit() {
//'+' operator will convert string into number
var userId = +sessionStorage.getItem('currentUser');
this.getUserBlogById(userId);
}