問題タブ [routerlink]

サブナビゲーションが関連付けられたナビゲーションコンポーネントがあります。データ構造は次のとおりです。

メイン ナビゲーションとサブ ナビゲーションの間にリンクを作成して、ページ レイアウトに移動したときにアクティブなクラスが引き続き設定されるようにしたいと考えています。私の現在の親HTMLは次のとおりです。

複数の routerlinks オプションを追加して、次のような routerlink オプションの配列を提供しようとしました。

しかし、これは機能しません。

ありがとう

更新：以下を参照してください

したがって、ユーザーがアプリを使用しているときに、2 つの異なる組織を持つアプリがあるため、所属する組織に応じて異なるコンポーネントをロードしたいと考えています。

アプローチ 1: ルート ファイルで単純な条件を実行します。

これは機能しますが、ローカルホストでのみ、heroku にプッシュして本番環境で実行すると、アプリが間違ったコンポーネントを提供します。この user-route.ts ファイルにログ出力を追加しようとしましたが、localhost では期待どおりにログが表示されますが、本番環境では何もありません。localStorage の「user」オブジェクトはどちらの場合にも存在し、同一です。 注:このアプローチは Angular 2 でも正常に機能していましたが、Angular 4 では、運用環境で実行しているときにルート ファイルで何かが発生しているように見えますが、何を知っているのか.. if 条件付きブレークを作成する何らかの方法でコンパイルされている可能性があります。

アプローチ 2. ルートとガードを使用します。別の組織に 2 つの警備員を追加します。動作しますが、ルートは異なる必要があります。最初の空のルートは常にチェックされますが、2 番目のルートはチェックされないため、以下のコードは機能しません。パスを空にする必要があります ('')。

ガードと条件付きルーティングに関するすべてのトピックは、「ホーム」と「ログイン」のどちらを表示するかに関するものであるように思われるため、ガードを使用するより良い方法があるかどうかはわかりません。理想的には次のようなものです：

アプローチ 3. 親テンプレートで ngIf を使用します。これも機能しますが、ルートをさらに下って「DetailsComponent」に移動するときに、コンポーネントを手動で非表示および表示する必要があります

では、条件に基づいて別のコンポーネントを表示するなど、一見些細なことをどのように行うのでしょうか?

更新 1:

機能していませんが、最も近いのは、名前付きルーターアウトレットを使用することでした。

右側のコンポーネントがロードされますが、上部の 2 つのルートに対してのみロードされます。空のパスを持つもの。私が得るidパラメータを持つ2つのルートについて

URLを手動で入力すると、すべてが正しく読み込まれるため、これは奇妙です:/次で呼び出されます:

-

-

これにより、下線付きのリンクが作成されます。

私の理解では、router-link要素はaタグを生成します。

私はCSSでこれらのことを試しました：

..しかし、残念ながら、これらはどれも機能しません。

更新: md テーブルは、この問題を引き起こしていると思われるフレックス レイアウト ディレクティブを使用して、いくつかのコンテナーにラップされています。これらのラッパーを表示するようにコードを更新しています。具体的には、外側のラッパーの fxLayoutGap がアプリを壊しています

データベースからのレコードのリストを示すAngular 4のこのデータテーブルがあります。特定の行のクリック (実際にはセルのクリック) で、アプリはその行の詳細データ (アプリ内の別の URL) を表示することを意図しています。次のように、md-cells 内で routerLink アンカーを使用してこれを達成しようとしています。

しかし、これを試してみると、コード内の何にも関係のないように見えるブラウザコンソールに奇妙なエラーが表示されます。

ええと、それは明らかにアンカーと関係があるものですが...何か概念が欠けているかどうかはわかりません。また、多くの例はありません。

angular 4の別のページからロードされたサイドメニューを持つWebアプリを作成しています.routerLinkを使用したメニューボタンはここで定義されています。

メニューが開いているときでもナビゲーションバーが表示されます。メニューが開いているときに、角度4でrouterLinkを「/ menu」から「/ home」に切り替える方法があるかどうか疑問に思っていました。