所以我昨天回答了一个问题，在我开始深入研究 Observables 之前，我觉得我在复制代码并且没有完全理解我在做什么。我的问题是我总是很难申请和查找满足我需要的文档。这意味着我仍然相当依赖于查看其他人如何使用代码，以便更好地掌握这些概念。
我花了大半夜的时间阅读这里相当出色的文档 https://github.com/Reactive-Extensions/RxJS/tree/master/doc
我开始理解 observables 优于 promises 的理念和力量。到目前为止，我有三个关于它们的问题；
- 有哪些好的在线资源可供我开始深入挖掘？
我的其他问题确实涉及如何在我的代码中更有效地使用它们。
- 如何获取我的可观察对象的最后更新值并将其保存在一个变量中？还有什么好的方法可以在页面重新加载时保留变量？
我将针对接下来的几个问题发布我的代码
@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 的变量中没有任何内容，因此菜单会消失。这有两个问题，一个是我真的很想在更新时动态更改一个变量以仅保存一个值，而不必使用可观察的强制数组。我可以只将可观察对象用作数组吗？
- 我从阅读中了解到，Angular2 不使用 $watch 事件来监视可观察对象的变化以触发事件/函数。是否有另一种方法来观察可观察对象的变化以触发函数或事件？
我绝对愿意就我的代码以及如何更好地使用它并希望以一种不那么棘手的方式对我的答案提出质疑。但我更希望更好地理解 Observables/Subjects 和良好的资源。我知道这是一个又长又宽的帖子，我只是没有任何人可以去找或寻求任何帮助，你们中的许多 angular2 人在这里回答问题都非常有帮助，并使它更容易让我理解这些概念。
谢谢!
最佳答案
1) 我认为我读到的关于响应式(Reactive)编程和可观察对象的最好资源是:
- https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
- http://slides.com/robwormald/everything-is-a-stream
关键概念是如何使用运算符创建异步数据流。前面的两个链接对此给出了很好的解释。
2) 事实上，当事件发生时，您将通过您使用subscribe 方法注册的回调收到通知。如果您想存储与事件关联的值，这取决于您...
3) 关于 $watch 功能的等价物。以下答案可能对您有所帮助:
您有 ngOnChanges Hook ，它允许您在绑定(bind)元素更新时收到通知。
关于angular - Observables 以及如何在 Angular2 中正确使用它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35415330/