問題タブ [angular2-services]

Angular2 の私のアプリケーションでは、ログインの成功に基づいて非表示のメニュー バーを表示したいという単純なニーズがあります。[hidden]=LoginSuccessそのために、ログインコンポーネントに設定し、 nav タグの app.component.html で使用する LoginSuccess ブール変数を持つサービスを作成しました。

私が直面している問題は、値を介して注入した後でも持続app.global.service.tsせず、各コンストラクターが新しいオブジェクトを作成することです。constructorapp.component.ts & login.component.tsapp.global.service.ts

質問: サービスを通じてアプリケーション全体で単一の値を永続化するにはどうすればよいですか。Angular2 ドキュメントのどこかで、Injectable サービスはシングルトンであると読みました。

ベースコンポーネントがあるとしましょう -

そして派生コンポーネント -

しかし、本当に必要なのは BaseComponent の myService 依存関係だけです。余分なコンストラクターを DerivedComponent に追加する必要を回避する方法はありますか?

DerivedComponent から依存関係を削除すると、注入されないようです。

私のデータサービスには次のものがあります。

私のコンポーネントには次のものがあります：

私が抱えている問題は、コンポーネントで currentTicketType を設定するにはどうすればよいですか? これは、 currentTicketSurvey がロードされていることと、 ticketTypes がロードされていることに依存します。これらは、コードの他の領域で一緒に呼び出される場合と呼び出されない場合があります。これらは非同期呼び出しであるため、サービスで呼び出した直後に設定することはできません。ノックアウトでは、計算されたオブザーバブルを設定するだけで完了できると思います。Angular 2 に相当するものが見つかりません。この状況を処理して、他のオブジェクトが読み込まれたときに currentTicketType を設定する方法についてのアイデアはありますか?

確かによく出てきます。私が見た例は、defer と concatAll を使用すると似ていますが同じではありませんが、これらのメソッドが常に同じ順序または同時に呼び出されると想定しているように見えます。私はまだ探しているものをまとめることができませんでした。

次の構造 (3 つのコンポーネント) のシステムがあります。

そしてサービス: ServiceEventEmitter を持っています。

3 つのコンポーネントすべてで、サービスをプロバイダーとして設定し、それをコンストラクターに追加して、イベントエミッターにサブスクライブしました。

問題は、イベントを発生させるサービスからメソッドを呼び出すコンポーネントでのみ発生することです。私の推測では、このように定義することで、各コンポーネントServiceは同じではなく異なるものを取得するため、イベントは起動メソッドを呼び出したコンポーネントによってのみ表示されます。

3 つのコンポーネントすべてが同じサービスにサブスクライブして実際にイベントをキャッチできるようにするには、どのような設計を行う必要がありますか?

ng2 http プロバイダー Observable.toPromise() サポートを使用して promise 対応メソッドを呼び出すと、期待どおりに動作しますが、promise チェーンの一部として使用すると、then ハンドラーが処理して結果を返す前に、返された promise が解決されます。

Observable.toPromise() をプロミス チェーンで動作させることに関する既知の問題、またはプロミス チェーンと互換性のある結果にするためにテストする代替方法はありますか? http リクエスト、promise チェーンの最後のアイテムが非同期リクエストを完了して結果を返す前に、この解決中の promise によってブロックされています。

例えば

洞察や提案をお寄せいただきありがとうございます。

コンポーネントに対して異なるビュー (html+css) を使用する方法を理解する必要があります。多くの人は、これらのビューごとに複数のコンポーネントを用意し、サービスを使用して対話する方が良いと言っていますが、私の場合は次のとおりです。基本的にレイアウトであるビューを持つコントローラーがあります。レイアウトの上部に 3 つのペインがあり、下部に 1 つのペインがあるとします。これで、レイアウトを上部の 2 つのペインと下部の 2 つのペインに変更するためのボタンがビューに表示されました。したがって、基本的に私のデータは変更されません。html と css を変更するだけです。また、最初のレイアウトがいくつかのデータで満たされている場合、変更はデータではなくレイアウトの変更のみであるため、レイアウトを変更するときに変更したり、再初期化したりしたくありません。

angular2でこれを達成する方法を理解するのは困難です。何か案は？

(2 つの異なるビューで) 別々にブーストされる 2 つのコンポーネントを作成し、これら 2 つのコンポーネント間で一意のサービス (シングルトン) を共有しようとしました。サービスは、これらのコンポーネントの 1 つを操作するために使用されます。私のサービス:

最初のコンポーネント:

そして、最初のコンポーネントとは別にブーストラップされた私の2番目のコンポーネント:

しかし、ModalContainerService には最初のコンポーネントの参照が含まれていません... 別々にブーストストラップされた 2 つのコンポーネント間でデータ/サービスを共有することは可能ですか?

コンポーネントがレンダリングされる前に、API からイベントをロードしようとしています。現在、コンポーネントの ngOnInit 関数から呼び出す API サービスを使用しています。

私のEventRegisterコンポーネント:

私のEventRegisterテンプレート

私の API サービス

ngOnInitコンポーネントは、関数内の API 呼び出しがデータのフェッチを完了する前にレンダリングされます。そのため、ビュー テンプレートにイベント ID が表示されません。したがって、これは ASYNC の問題のようです。プロパティが設定された後、 ev(コンポーネント)のバインディングがEventRegister何らかの作業を行うことを期待していました。残念ながら、プロパティが設定されたときにマークが付いevたものは表示されません。div*ngIf="ev"

質問:適切なアプローチを使用していますか? そうでない場合; コンポーネントがレンダリングを開始する前にデータをロードする最良の方法は何ですか?

注:このngOnInit方法は、このangular2 チュートリアルで使用されています。

編集：

2 つの可能な解決策。最初は を捨てて、関数fetchEventで API サービスを使用するだけでした。ngOnInit

2番目の解決策。与えられた答えのように。