Observables 以及如何在 Angular2 中正确使用它们

Question

所以我昨天回答了一个问题，在我开始深入研究 Observables 之前，我觉得我在复制代码并且没有完全理解我在做什么。我的问题是我总是很难申请和查找满足我需要的文档。这意味着我仍然相当依赖于查看其他人如何使用代码，以便更好地掌握这些概念。

我花了大半夜的时间阅读这里相当出色的文档 https://github.com/Reactive-Extensions/RxJS/tree/master/doc

我开始理解 observables 优于 promises 的想法和力量。到目前为止，我对它们有三个问题；

有哪些我可以开始深入挖掘的优秀在线资源？

我的其他问题确实涉及如何在我的代码中更有效地使用它们。

如何获取可观察对象的最后更新值并将其保存在变量中？还有什么好的方法可以在页面重新加载时保留变量？

我要post我的代码来回答接下来的几个问题

@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');
    }
}

这是我的 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);
  }
}

现在，当它加载时，我的第一个确实会正确触发，但如果我刷新页面，则保存 loggedIn 的变量中没有任何内容，因此菜单会消失。这有两个问题，一个是我真的很想在更新时动态更改一个变量以仅保存一个值，而不必使用可观察的强制数组。我可以只将一个可观察对象用作数组吗？

我从阅读中了解到，Angular2 不会使用 $watch 事件来监视要触发 events/functions 的可观察对象的变化。是否有另一种方法来观察可观察对象的变化以触发函数或事件？

我绝对愿意就我的代码以及如何更好地使用它并希望以一种不那么棘手的方式对我的答案提出质疑。但我更希望能更好地了解 Observables/Subjects 和良好的资源。我知道这是一个漫长而广泛的 post，我只是没有人可以去寻求任何帮助，你们中的许多 angular2 在这里回答问题的人都非常有帮助并且做出了我更容易理解这些概念。

谢谢！

Answer 1

1) 我认为我读到的关于反应式编程和可观察对象的最佳资源是：

关键概念是如何使用运算符创建异步数据流。前面的两个链接对此给出了很好的解释。

2) 事实上，当事件发生时，您将通过您使用 subscribe 方法注册的回调收到通知。如果您想存储与事件关联的值，由您决定...

3) 关于 $watch 功能的等价物。以下回答可能对您有所帮助：

您拥有 ngOnChanges 挂钩，可让您在绑定元素更新时收到通知。

Observables 以及如何在 Angular2 中正确使用它们

Observables and how to use them correctly in Angular2

observable

rxjs

angular2-template

angular2-services

angular