Question

所以我昨天回答了一个问题，我觉得我在复制代码并且没有完全理解我在做什么，直到我开始潜入Observables。我的问题是，我总是在申请和查找满足我需求的文档时遇到了一些困难。这意味着我仍然非常依赖于了解其他人如何使用代码，因此我可以更好地掌握这些概念。

我已经花了大部分时间在这里相当出色的文档中阅读https://github.com/Reactive-Extensions/RxJS/tree/master/doc

我开始理解可观察者对承诺的想法和力量。到目前为止，我有三个问题;

哪些优秀的在线资源可供我深入挖掘？

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

如何获取我的observable的最后更新值并将其保存在变量中？还有什么好办法可以在页面重新加载时保留变量吗？

我将为接下来几个问题发布我的代码

@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类：

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的变量中没有任何内容，所以菜单消失了。这有两个问题，一个是我真的想动态更改更新时的变量只保存一个值而不必使用可观察的强制数组。我只能将一个observable用作数组吗？

我从阅读中了解到，Angular2无法使用$ watch事件来监视可观察对事件/函数的更改。是否有其他方法可以观察对可观察物的更改以关闭某个功能或事件？

我非常希望能够对我的代码提出质疑，以及如何更好地使用它，并希望以更少的hacky方式使用它。但我希望能更好地了解Observables / Subjects和良好的资源。我知道这是一个冗长而广泛的帖子，我只是没有任何人可以去找或帮助任何这个和你们中的很多人回答这里的问题非常有用并且做得很多我更容易理解这些概念。

谢谢！

Answer 1

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

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

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

3）关于$ watch功能的等价物。以下答案可以帮助您：

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

Obularable以及如何在Angular2

1 个答案: