問題タブ [angular2-services]

簡単な WebSocket サービスとコンポーネントを作成しましたが、WebSocket を介して新しいデータを受信したときにビューを更新するのに苦労しています。

websocket.service.ts

ランナー.コンポーネント.ts

runners-list.html

コンポーネントで onNext メソッドが正常に呼び出され、コンソールに新しいデータが正しく出力されますが、ビューは更新されません。ngZone でも試してみましたが、成功しませんでした。

以下のコードを使用すると、ブラウザーで JavaScript エラーが発生します。

constructor(private _http:Http) { }から削除するimage.service.tsと、エラーは発生しなくなりました。

私はhttp間違って使用していますか？httpjson を返すだけのサービスを作成するにはどうすればよいですか?

App.compontent.js:

image.service.js:

私はAngular2を初めて使用し、すべてのメソッドが にあるアプリの作成から始めmain.ts、そのファイルはmain.html. このアプリをサブコンポーネントとサービスにリファクタリングしました。だから、私は今持っています：

sub.componentにディレクティブとして含まれていapp.componentます。app.compontentを挿入data.serviceし、 のクリック イベントからサービスを呼び出すことができますapp.component。

質問

以前は、コンポーネントの関数からビューのプログレス バーを更新できました。関数が独自のサービスになったので、サービスで長時間実行される (再帰的) メソッドの進行状況をユーザーに通知するにはどうすればよいでしょうか? サービスからapp.componentまたはsub.componentに進行状況を渡す必要があると思いますが、これはどのように行われるのでしょうか?

内部のプロパティがデータである test というクラスがあります。test.data が更新されると、home.showVar も更新されるようにバインドするにはどうすればよいですか (ユーザーにリストを表示しhome.showVarたい)test.data

基本的に、API呼び出しをトリガーするtestというサービスが必要です。これにより、データが返され、既存のデータとマージされてからユーザーに表示されます。私はangular2とtypescriptが初めてです。httpデータを既存のデータとマージして、別のページにバインドする方法がわかりません。

以前の投稿でログインしたことに基づいて、メニューを表示および非表示にする方法を見つけようとしていました。しかし、ローカルストレージへの変更を監視するにはどうすればよいでしょうか。

認証のためにローカル ストレージで json Web トークンを使用しています。localStorage への変更を監視してから、新しい情報に関するビューを再更新したいと考えています。

これでlocalStorageを設定しました

私がやりたいことは、トークンがあるかどうかを確認することです。何も起こらない場合は、変更が発生したときにイベントを発生させます。localStorage.getItem('jwt') のような特定の名前付きイベントのみを監視できれば、特に気に入っています。

ありがとう！

編集：

Gunter は私に正しい方向性を教えてくれましたが、それでもまだかなり混乱している人がいる場合に備えて、その方法を示すプランカーを次に示します。 http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

それで、昨日質問に答えてもらいました.Observablesに深く入り込むまで、コードをコピーしていて、自分が何をしているのかを完全に理解していないように感じました. 私の問題は、自分のニーズに合ったドキュメントを適用して見つけるのに常に少し苦労していたことです。つまり、概念をよりよく理解できるように、他の人がコードをどのように使用しているかを見ることに今でもかなり頼っています。

ここにあるかなり優れたドキュメントhttps://github.com/Reactive-Extensions/RxJS/tree/master/docでそれについて読むのにほとんどの夜を費やしました

私は、約束に対するオブザーバブルの背後にあるアイデアと力を理解し始めています。これまでのところ、それらについて 3 つの質問があります。

1. より深く掘り下げることができる優れたオンライン リソースは何ですか?

私の他の質問には、コード内でそれらをより効果的に使用する方法が含まれます。

2. オブザーバブルの最後に更新された値を取得して、変数内に保持するにはどうすればよいですか? また、ページのリロード時に変数を永続化する良い方法はありますか?

次のいくつかの質問のためにコードを投稿します

これが私の LocalStorage クラスです：

これが読み込まれると、最初のトリガーは正しく実行されますが、ページを更新すると、loggedIn を保持している変数には何も含まれていないため、メニューが消えます。これには 2 つの問題があります。1 つは、監視可能な強制配列を使用する代わりに、更新時に変数を動的に変更して 1 つの値のみを保持したいということです。オブザーバブルを配列としてのみ使用できますか?

3. 私は、Angular2 がイベント/関数を起動するオブザーバブルへの変更を監視する $watch イベントを機能させないことを理解しています。関数またはイベントをオフにするためにオブザーバブルへの変更を監視する別の方法はありますか?

私のコードと、それをより適切に、できればあまりハックしない方法で使用する方法について、私の答えを質問してもらいたいと思っています。しかし、Observables/Subjects と優れたリソースについてさらに理解を深めたいと思います。私はこれが長くて幅広い投稿であることを知っています.私は私が行ったり、これについて助けを求めることができる人がいません.概念を理解するために。

ありがとう！