6

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;

  1. 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.

  1. 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?

  1. 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!

+1

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

risposta

5

1) Credo che le migliori risorse che ho letto sulla programmazione reattiva e osservabili sono quelli là:

Il concetto chiave è come creare il flusso di dati asincrono utilizzando operatori. I due link precedenti danno grandi spiegazioni a riguardo.

2) In effetti, l'utente verrà avvisato quando si verificano eventi tramite la richiamata registrata utilizzando il metodo subscribe. Se vuoi memorizzare il valore associato all'evento, tocca a te ...

3) Per quanto riguarda l'equivalente della funzione $ watch. A seguito di risposte potrebbe aiutare:

avete la gancio ngOnChanges che ti permette di essere avvisato quando legati elementi vengono aggiornati.

Problemi correlati