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

Question

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

Mor*_*n G 7 observable rxjs angular2-template angular2-services angular

所以我昨天回答了一个问题,我觉得我在复制代码并且没有完全理解我在做什么,直到我开始深入了解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');
    }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

现在当这个加载我的第一次正确触发时,但如果我刷新页面,保持loggedIn的变量中没有任何内容,所以菜单消失.这有两个问题,一个是我真的想动态更改更新时的变量只保存一个值而不必使用可观察的强制数组.我只能将一个observable用作数组吗？

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

我非常希望能够对我的代码提出质疑,以及如何更好地使用它,并希望以一种不那么糟糕的方式使用它.但我希望能更好地了解Observables/Subjects和良好的资源.我知道这是一个冗长而广泛的帖子,我只是没有任何人可以去或寻求任何帮助,你们很多在这里回答问题的人们都非常有帮助并且让它变得更容易我理解这些概念.

谢谢!

Answer 1

Thi*_*ier 5

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

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

2)事实上,当您通过使用该subscribe方法注册的回调发生事件时,您将收到通知.如果你想存储与事件相关的值,那取决于你......

3)关于$ watch功能的等价物.以下答案可以帮助您:

您有一个ngOnChanges钩子,允许您在更新绑定元素时收到通知.

归档时间：	9 年，11 月前
查看次数：	1553 次
最近记录：	9 年，11 月前