There is no `$ rootScope` in` Angular9`. What can be used?

user_11163730 0
Viewed 1054

In AngularJS i used$ rootScope to pass user data, for example:

$ rootScope.user = {
id: '4',
username: 'user'
...
};
$ rootScope.user.authenticated = false;

the data in $ rootScope was filled in every time a page was opened or updated using a query toSQL.

In Angular 9 i did not find the use of$ rootScope. Tell me, where can such data be stored in Angular 9 and with what help can this functionality be implemented?

angular9
2 Answers

In angular, if you need anything like that, you create a service, provide it in root and inject it wherever you want it. For example:

The service:


// Create the service (providedIn: 'root') makes it available globally
@Injectable({providedIn: 'root'})
export class UserService {
  user: any ={
    id: '4',
    username: 'user'
    ...
  };
}

Using the service in a component:

@Component({...})
export class MyComponent implements OnInit {
  _isAuthenticated: boolean;

  // Inject the service
  constructor(private _userService: UserService) {}

  ngOnInit() {
    // Using the service
    this._isAuthenticated = _useService.user?.authenticated ?? false;
  }
}

PS: The code above uses two interesting typescript features (which are new as I write this answer): optional chaining and Nullish Coalescing. You can always use a regular ternary operator instead of that: 

this._isAuthenticated = _useService.user ? _useService.user?.authenticated : false
user_64331660

When my team and I migrated one of the projects from AngularJS to Angular, I took a look at when $rootScope was being used in the old app and it turns out it was used for identity/authentication 95% of the time. A few other use cases were regarding the spinner, browser related settings and edge cases.

It seems like your use case is similar to ours as well. I just folded that $rootScope.user into an existing AngularJS service called identity (or it could be auth, or whatever). So in each component that referred to that $rootScope.user, I replaced it with the following. The constructor is just dependency injection, allows you to use the variables within the identity service anywhere.

whatever.component.ts

currentUser = this.identity.currentUser
constructor(private identity: IdentityService) {}

The identity service looks something like the below. There's a getter function for the current user, and when it's not available, you look into the cookie, or otherwise, it's blank object (unauthenticated).

identity.service.ts

private _currentUser;  //should only obtain currentUser via get currentuser()

constructor(private cookieService: CookieService) {}

get currentUser() {
    if (!this._currentUser) {
      this._currentUser = this.getUserFromCookie() || {};  //get from cookie
    }
    return this._currentUser;
  }

getUserFromCookie() {
    return this.cookieService.get('currentUser') ? JSON.parse(this.cookieService.get('currentUser')) : {};
  }

Hopefully this gets you started and helps others as well.

user_56481430
Related