それで、昨日質問に答えてもらいました.Observablesに深く入り込むまで、コードをコピーしていて、自分が何をしているのかを完全に理解していないように感じました. 私の問題は、自分のニーズに合ったドキュメントを適用して見つけるのに常に少し苦労していたことです。つまり、概念をよりよく理解できるように、他の人がコードをどのように使用しているかを見ることに今でもかなり頼っています。
ここにあるかなり優れたドキュメントhttps://github.com/Reactive-Extensions/RxJS/tree/master/docでそれについて読むのにほとんどの夜を費やしました
私は、約束に対するオブザーバブルの背後にあるアイデアと力を理解し始めています。これまでのところ、それらについて 3 つの質問があります。
- より深く掘り下げることができる優れたオンライン リソースは何ですか?
私の他の質問には、コード内でそれらをより効果的に使用する方法が含まれます。
- オブザーバブルの最後に更新された値を取得して、変数内に保持するにはどうすればよいですか? また、ページのリロード時に変数を永続化する良い方法はありますか?
次のいくつかの質問のためにコードを投稿します
@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 を保持している変数には何も含まれていないため、メニューが消えます。これには 2 つの問題があります。1 つは、監視可能な強制配列を使用する代わりに、更新時に変数を動的に変更して 1 つの値のみを保持したいということです。オブザーバブルを配列としてのみ使用できますか?
- 私は、Angular2 がイベント/関数を起動するオブザーバブルへの変更を監視する $watch イベントを機能させないことを理解しています。関数またはイベントをオフにするためにオブザーバブルへの変更を監視する別の方法はありますか?
私のコードと、それをより適切に、できればあまりハックしない方法で使用する方法について、私の答えを質問してもらいたいと思っています。しかし、Observables/Subjects と優れたリソースについてさらに理解を深めたいと思います。私はこれが長くて幅広い投稿であることを知っています.私は私が行ったり、これについて助けを求めることができる人がいません.概念を理解するために。
ありがとう！