So, yesterday I had a question, and I feel like copying the code and don’t quite understand what I’m doing, until I started to dive deep into Observables. My problem is that I always had a hard time applying and finding documents for my needs. This means that I still rely heavily on how other people use the code so that I can better understand the concepts.
I spent most of the night reading about this in a pretty good documentation here https://github.com/Reactive-Extensions/RxJS/tree/master/doc
I am beginning to understand the ideas and power observed over promises. So far I have three questions:
- What are some good online resources where I can start digging deeper?
My other questions are related to how to use them more efficiently in my code.
- How can I get the last updated value of my observable and hold it inside a variable? Also is there a good way to save a variable on page reload?
I am going to post my code for the following couple questions
@Component({ selector: 'my-app', providers: [FORM_PROVIDERS, RoleService, UserService], inputs: ['loggedIn'], directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet], template: `<body> <div *ngIf="loggedIn[0]=== 'true'"> <nav class="navbar navbar-inverse navbar-top" role="navigation"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class = "nav navbar-nav"> <li> <a [routerLink] = "['/RolesList']">Roles</a> </li> <li> <a [routerLink] = "['/UserList']">Users</a> </li> <li> <a [routerLink] = "['/UserRolesList']">User Roles</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a [routerLink] = "['/Login']" (click)="logout()">Logout</a> </li> </ul> </div> </div> </nav> </div> <div class="container"> <router-outlet></router-outlet> </div> </body>` }) export class AppComponent{ public loggedIn: Array<string> = new Array<string>(); public localStorage: Array<string> = new Array<string>(); constructor(private _localStorage: LocalStorage){ } ngOnInit(){ this._localStorage.collection$.subscribe(login_trigger => { this.localStorage = login_trigger; }); this._localStorage.loggedIn$.subscribe(to_be_or_not_to_be => { this.loggedIn = to_be_or_not_to_be; }); this._localStorage.load(); } logout(){ localStorage.removeItem('jwt'); this._localStorage.logout('false'); } }
Here is my LocalStorage class:
export class LocalStorage { public collection$: Observable<Array<string>>; private _collectionObserver: any; private _collection: Array<string>; public loggedIn$ :Observable<boolean>; private _loggedinObserver: any; private _loggedIn: Array<string>; constructor() { this._collection = new Array<string>; this._loggedIn = new Array<string>; this.loggedIn$ = new Observable(observer => { this._loggedinObserver = observer; }).share(); this.collection$ = new Observable(observer => { this._collectionObserver = observer; }).share(); } add(value: string) { this._collection.push(value); this._collectionObserver.next(this._collection); } logIn(value: string){ this._loggedIn.unshift(value); this._loggedinObserver.next(this._loggedIn); } logout(value: string){ this._loggedIn.unshift(value); this._loggedinObserver.next(this._loggedIn); } load() { this._collectionObserver.next(this._collection); this._loggedinObserver.next(this._loggedIn); } }
Now, when this loads my first one, it starts correctly, but if I refresh the page, the variable containing loggedIn has nothing in it, so the menu disappears. There are 2 problems with this: I would really like to dynamically change the variable when updating, so that it has only one value instead of using the observable forced array. Is it possible to use only an observable array?
- As far as I understand, the $ watch event does not work from Angular2 to observe changes in the events / functions observed for triggering. Is there another way to observe a change in the observable in order to disable a function or event?
I would really like my answers to be questioned for my code and how to use it better and, I hope, in a less negligent way. But I would like to get a good idea of observers / objects and good resources even more. I know that this is a long and wide post, I just do not have anyone with whom I can go or ask for help with any of them, and many of you guys who answer the questions here were fantastically useful and did it it’s easier for me to understand the concepts.
Thanks!