I have two urls /login
and /home
. When I log in I want to store the username in a field of the LoginService. This is done on the /login
page. Now when I go to /home
it's like the service gets created again and all the fields are empty.
This is my service
@Injectable({
providedIn: "root"
})
export class LoginService {
public CURRENT_USER: User;
}
this is how I get the service in my components
export class HomeComponent {
constructor(private loginService: LoginService) {}
}
and here's is my routing module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import SignUpComponent from './components/sign-up/signup.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignUpComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Now am I missing something or am I doing my routing wrong?
Thanks in advance
If I correctly understand what you want to do, I suggest you to :
CURRENT_USER
on the local storage and retrieve him whenever you want
(user = JSON.parse(localStorage.getItem(CURRENT_USER));
)CURRENT_USER
as Observable
and subscribe()
to it on the component/s you wantThere is nothing to do with your routing implementation.It is how Angular life-cycle works.
UPDATE
For the 2nd option :
Create a new Service (UserService
)
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class Userservice {
private subject = new Subject<User>();
sendUser(currentUser: User) {
this.subject.next(currentUser);
}
getCurrentUser(): Observable<User> {
return this.subject.asObservable();
}
}
When you login :
constructor(private userService: UserService) {}
login() {
this.userService.sendUser(CURRENT_USER);
}
On the component you want to get the current user :
user: User;
constructor(private userService: UserService) {
this.userService.getCurrentUser().subscribe(currentUser => {
this.user = currentUser;
});
}