【发布时间】：2016-05-26 17:09:51
【问题描述】：
所以我昨天回答了一个问题，我觉得我在复制代码，并没有完全理解我在做什么，直到我开始深入研究 Observables。我的问题是我总是很难根据自己的需要申请和查找文档。这意味着我仍然相当依赖于查看其他人如何使用代码，以便更好地掌握这些概念。
我花了大部分时间阅读这里相当优秀的文档https://github.com/Reactive-Extensions/RxJS/tree/master/doc
我开始理解 observables 背后的想法和力量。到目前为止，我有关于它们的三个问题；
- 有哪些好的在线资源可以让我开始深入挖掘？
我的其他问题确实涉及如何在我的代码中更有效地使用它们。
- 如何获取我的 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);
}
}
现在，当这加载时，我的第一个确实会正确触发，但是如果我刷新页面，则保存已登录的变量中没有任何内容，因此菜单消失了。这有两个问题，一个是我真的很想在更新时动态更改变量以仅保存一个值，而不必使用可观察的强制数组。我只能使用 observable 作为数组吗？
- 我从阅读中了解到 Angular2 无法使用 $watch 事件来监视可观察对象的更改以触发事件/函数。是否有其他方法可以监视可观察对象的更改以触发函数或事件？
我绝对希望有人质疑我的代码以及如何更好地使用它，并希望以一种不那么老套的方式来回答我的问题。但我更想对 Observables/Subjects 和好的资源有一个很好的理解。我知道这是一篇冗长而广泛的帖子，我只是没有任何人可以去找或寻求任何帮助，而且你们中的许多 angular2 在这里回答问题的人都非常有帮助，并且让我更容易我来理解这些概念。
谢谢！
【问题讨论】：
-
这太宽泛了，我建议您在关闭此问题之前将其拆分为更具体的问题。至于资源，您可能希望使用documentation version 5，因为这是Angular 2 使用的一个。 EggHead.io 有非常好的反应式编程介绍视频，Ng-Book 2 有一个使用 Angular 2 与之相关的章节，其中有一个类似于您在第二个问题中尝试实现的示例。
标签： angular observable rxjs angular2-template angular2-services