問題タブ [angular2-router]

ルートをハードコードして遅延ロードしたくないので、JSON ファイルからルートをロードしようとしています。このようなもの：

コンポーネントに挿入されたサービスを使用して JSON ファイルを読み込んでいます。ルーターにサービスを挿入して値を取得するにはどうすればよいですか? または、JSON からルートをロードできる他のより良い方法はありますか?

私はこのチュートリアルに沿ってangular 2を学び[Build an application with Angular 2 and Firebase][1]、それを拡張しようとしています。しかし、複数のルートをネストしようとすると、問題が発生しました。

アプリの構造:

ルーターのセットアップ:

問題

Experiment List のExperiment 1をクリックするgoals/1/experiments/1/notesと、正しい URL に到達し、正しいExperiment 1 の Notesが表示されます。

その後、Experiment ListのExperiment 2をクリックするとgoals/1/experiments/2/notes、URL は正しく、Experiment の詳細は正しいのですが、メモはまだExperiment 1 の Notes のままです。

次にブラウザーを更新すると、Experiment 2が読み込まれ、メモは正しいExperiments 2 のメモになります。

これはexperimentId、メモを取得するための を取得する方法です

実験ノート.component.ts

私が犯している明らかな間違いだと確信していますが、私の人生では、これのどこが間違っているのかわかりません.

angular-cli を使用して angularfire2 アプリケーションを構築しています。

最初の子サブルートのロード時に、angularfire2 がコンソールにエラーをスローするという問題があります。

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: 未定義のプロパティ 'subscribe' を読み取れません

これは、ページが「更新」されたときに発生します。コンポーネントから離れて更新後に戻ると、データは正常に読み込まれ、エラーは発生しません。これが Angular2 や AngularFire2 のバグなのか、それとも私が何か間違っているのかはわかりません。誰かがこの問題を抱えていますか？関連するコンポーネントコードは次のとおりです。

typescript と systemjs を使用した角度のある 2 つのアプリがあります。

私のアプリはわずか 800kb で、テキストのみの長いページに 4 秒かかります。

すべての js と css は小さい/縮小されており、合計 11 件のリクエストがあり、画像はほとんどありません

すべての画像は圧縮され、cdn firebase に保存されています。

私はfirebaseでホストし、sslとパフォーマンスのためにcloudflareを使用しています.

ロードとキャッシングで angular2 のパフォーマンスが低下したことを経験した人はいますか?

キャッシングの速度も向上しません。

以下は、ファイルと読み込み時間のスクリーンショットです。

これは速度テストの結果です: https://www.webpagetest.org/result/161205_0H_S4H/

読み込み中のリクエスト: 17 (読み込み中のネットワーク タブの以下のスクリーン グラブを参照)

ActivatedRouteObservables が好きparamsかurl、購読されているが購読解除されていない多くの例を見つけました。

• ルート オブジェクトとサブスクリプションは自動的に破棄され、コンポーネントが作成されるたびに新しく作成されますか?
• それらの s からの登録解除について気にする必要がありObservableますか?
• そうでない場合は、 の ActivatedRoute オブジェクトのツリーで何が起こるか説明できますかRouter。routerState?

新しいAngular2アプリにフィルタリングメカニズムを実装しようとしています。これにより、配列内のエントリのリストをフィルタリングできます。エントリには、フィルタリングできる約 20 のプロパティが含まれる場合があります。ここまでは、1 つのコンポーネントでフィルターのリストを作成してから、ルーティング先のリスト コンポーネントを子として作成しました。次に、ルーターを介してフィルターを queryParams として渡すことを計画しました。たった1つのフィルターから始めて、これは問題ありませんでした：

送信側で私が持っていた：

受信側では、次のことがありました。

次に myFilter をフィルター パイプに渡して、一致とフィルター処理を行います。これまでのところすべて問題ありません。

ただし、これをスケールアップして複数の潜在的なパラメータを許可する方法がわかりません。そのほとんどは空白/不要です。

queryParam を介してすべてのアクティブなフィルターを保持する配列を定義する必要があると想像できますが、私が見つけることができる唯一のドキュメントは、パラメーターが 1 つだけ渡された例のみを示しています。私は遊んでみました：

しかし、キーと値のペア以外のものを入力すると、IDE がエラーを登録します。

考えられるすべてのフィルターとその値を毎回追加することもできますが、それでは毎回非常に長い URL 文字列が作成され、ほとんどの値が空白またはすべてなど、あまりきれいではありません。

したがって、私のワークフローは、送信側ですべてのフィルターとその状態の配列を維持し、フィルター ボタンの 1 つがクリックされるたびに、最初に配列内の関連する値を更新してから、配列全体を渡す必要があると思います。 queryParams を介して。

受信側では、Param を配列として受信して処理し、各エントリを変数として抽出してフィルターで処理する必要があります。私もDRYになりたいので、受信側のいくつかのステートメントが異なるプロパティに対して同じことを効果的に実行することを実際には望んでいません。単純に、代わりに配列を循環させる方が理にかなっています。

それが理にかなっていることを願っています。別の方法でデータを渡すことを意味するとしても、誰かに提案があれば感謝します。たとえば、現在、別のフィルター サービスを作成し、代わりに @Input を使用してデータを渡すことで、データを渡すことができるかどうかを調べています。

どんなアイデアもありがたく受け取った (独学のアマチュアなので、おそらく明らかな何かを見逃している!)

ありがとう

トニー

ルーターからのrouterLinkいくつかに基づいてを表示/非表示にしたい。Dataディレクティブは完了しましたが、最も重要な部分が欠けています...

たとえば、次のルーター構成があります (コンポーネントは省略されています)。

がまたはの場合に使用されるRouterをに尋ねたいと思います。RouterouterLink/foo/bar/baz/123

Routerソース コード ( https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router.ts )を調べましたが、これを行う簡単な方法が見つかりませんでした。特に、これらの:id変数をどのように処理するか。

もちろん、 を反復してRouter.config、さらに深くすることもできます。しかし、その後、それらの変数、正規表現などを解析する必要があります。Angular ルーターも内部でこれらすべてを行う必要があるため、もっと簡単な方法があるはずです。

アイデア/解決策はありますか？