Così ho avuto una risposta a una domanda ieri, e mi sento come se stessi copiando il codice e non comprendendo appieno quello che stavo facendo fino a quando non ho iniziato a immergermi nelle profondità di Observables. Il mio problema è che ho sempre avuto un po 'di difficoltà nell'applicare e trovare la documentazione per i miei bisogni. Il che significa che continuo a fare affidamento abbastanza pesantemente sul vedere come le altre persone hanno usato il codice in modo da poter capire meglio i concetti.Osservabili e come usarli correttamente in Angular2
ho trascorso la maggior parte della notte a leggere su di esso nel abbastanza eccellente documentazione qui https://github.com/Reactive-Extensions/RxJS/tree/master/doc
Sto iniziando a capire le idee e potere dietro osservabili su promesse. Ho tre domande su di loro;
- Quali sono alcune buone risorse online in cui posso iniziare a scavare più a fondo?
Le altre mie domande riguardano come utilizzarle in modo più efficace all'interno del mio codice.
- Come posso ottenere l'ultimo valore aggiornato del mio osservabile e tenerlo in una variabile? C'è anche un buon modo per mantenere la variabile sulla pagina di ricarica?
ho intenzione di inviare il mio codice per i prossimi paio di domande
@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');
}
}
Ecco la mia classe LocalStorage:
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);
}
}
Ora, quando questo viene caricato il mio primo non innescare correttamente, ma se Aggiorna la pagina in cui la variabile contenente login non contiene nulla, quindi il menu scompare. Ci sono 2 problemi con questo, uno è che mi piacerebbe davvero cambiare dinamicamente una variabile in aggiornamento per mantenere solo un valore invece di dover usare l'array forzato osservabile. Posso usare solo un osservabile come array?
- Capisco dalla lettura che Angular2 non funziona un evento $ watch per osservare le modifiche agli osservabili agli eventi/funzioni di fuoco con. C'è un altro modo di vedere un cambiamento di un osservabile per attivare una funzione o un evento spento?
Mi piacerebbe assolutamente avere le mie risposte in discussione per il mio codice e come usarlo meglio e, si spera, in un modo meno hacky. Ma mi piacerebbe ancora di più per ottenere una buona comprensione su osservabili/soggetti e buone risorse. So che questo è un post lungo e ampio, semplicemente non ho nessuno con cui posso andare o chiedere aiuto con nessuno di questi e molti di voi angular2 che rispondono alle domande qui sono stati straordinariamente utili e hanno reso molto più facile io per capire i concetti.
Grazie!
Questo è troppo ampio, ti consiglierei di dividerlo in domande più specifiche prima di chiudere questa domanda. Per quanto riguarda le risorse, è possibile utilizzare la [versione 5 della documentazione] (https://github.com/ReactiveX/RxJS) in quanto quella utilizzata da Angular 2. [EggHead.io] (https://egghead.io/technologies/rx) ha ottimi video introduttivi per la programmazione reattiva e [Ng-Book 2] (https://www.ng-book.com/2/) ha un capitolo relativo ad esso usando Angular 2 in cui c'è un esempio simile a quello che stai cercando di ottenere nella tua seconda domanda. – Langley