How to create new instance of angular service?

Question

So, I'm looking solution for the problem... Ok, let me share my thoughts and possible you could help me or say that I'm wrong.

Introduction:

When you are creating angular apps usually you create the service which calls like AuthService which contain methods login, logout, refreshToken and etc.

But, you also need to store somewhere your current users, it will be user who was logged in your application. Usually you will create something like UserModel with fields like firstname, lastname, balance, group, friends and etc. And so, you are store instance of this model in AuthService.

After that for getting active user you need to inject your Auth service in your @component like this:

constructor(private _authService: AuthService) {
  this.user = this._authservice.user;
}

Yep?

The problem:

So, I do not want inject authService for getting current user. I want to have CurrentUser service which will be allowed across all modules and will contain everything about logged user like UserModel.

I want something like this:

constructor(public user: UserService) {
}

BUT when user do logout I need to cleanup UserService and re-initialize every field to default value. So, this step it is a real problem. Yes, sure, I can do for ... in cycle by object fields, but it's sucks! I want to create new instance of UserService and make re-assign in global scope.

If you still do not understand - UserService was declared as provider in my root AppModule like this:

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    UserService
  ]
})
export class AppModule {}

Question: How can I create new instance for UserService and replace it in global?

When user logout I want to do this and all my components will get new, clean instance of UserService without filled fields and etc. And when new user will be logged in I'll use method of UserService class like user.updateUser(data) for filling this instance.

Answer 1

This can be achieved by declaring the service UserService to the highest level component your user is directed to after logging in (say HomeComponent). Continue to declare your authService as a provider in your root app.module.ts so it remains a singleton for the entire application life time.

By doing this the UserService will be created each time a User logs in and it will be available to all the children of the home component (which is why you will want to be sure to provide it at the highest level component), and it will be destroyed each time a user logs out. Creating a singleton for each user session.

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [UserService]
})
export class HomeComponent {...}

I want to stress the highest level component. Essentially from an Architecture perspective what you would want to do is (in this example) be sure to make the HomeComponent essentially a container component for all routes/components a logged in user would need to access thereafter. Otherwise, this technique will not succeed for say sibling components, as the sharing of the UserService is dependent upon the hierarchical component structure.