問題タブ [angular-component-router]

モジュール 2 がモジュール 1 内に表示されるのはなぜですか?

複数のモジュールを含む 1 つの角度付きアプリがあります。一部のモジュールでは、コンポーネント ルーターを使用したいと考えています。コンポーネントがどのページ (url) にロードされるかはわかりません。

現在の状況: モジュール 1 内で、モジュール 2 のテンプレートが表示されています。

望ましい結果:
'...com/someUrlWhereModule1Lives#/step2' がモジュール 1 のステップ 2 をロードする '...com/someUrlWhereModule2Lives#/step2' がモジュール 2 のステップ 2 をロードする ように、コンポーネントに相対的なパスを用意します

module1.module.js

module2.module.js

デモへのリンク

さらに情報が必要な場合は、お知らせください。

1.5x プロジェクトをコンポーネントに切り替えて、新しいコンポーネント ルーターを使用しようとしています。$routerディレクティブ内にないいくつかのコンポーネントにプログラムでアクセスする方法に問題があります。基本的に、できる必要があるヘッダーとサイドバーのコンポーネントがあります$router.navigvateが、バインディングを使用{$router: "<"}すると、 undefined になり$routerます。

アプリを少し再構築する必要があるかもしれないと思いますが、どうすればよいかわかりません。

現在、私の Index.html には、本文に ng-app が定義されており、その中にメインのアプリ モジュールがあります ( <app></app>)。私のメイン アプリ コンポーネントには、基本的に「マスターページ」を含むテンプレートがあります。

したがって、app.html には<header>コンポーネント、<sidebar>コンポーネント、そして<ng-outlet>メイン コンテンツがあります。UI-Router では、ヘッダー/サイドバー コントローラーで $state サービスを使用して、アクティブな状態を見つけたり、新しい状態に移動したりしました。

component-router を使用すると、$router をヘッダー/サイドバー コントローラーに入れる方法がわかりません。

何か案は？

Angular の標準ルートを使用して、子コントローラーに親 $scope にアクセスさせることができました。

内のすべての子コントローラーng-viewは ParentCtrl データにアクセスできますが、Angular 1.5 コンポーネント ルーターでは、これは当てはまらないようです。上記のマークアップの唯一の違いは、代わりng-viewにng-outlet.

ng-outletコンポーネントルーターに基づく子コントローラー内の親コントローラー情報にアクセスする方法を知っている人はいますか? または、親データにアクセスする他の方法はありますか?

そのようにルーティングを設定しました。ユーザーが http://localhost:3000 にアクセスすると、Home コンポーネントをロードしようとします。ただし、ユーザーがログインしていない場合は、ユーザーをログイン コンポーネントにリダイレクトします。

その時点までは正常に動作しています。問題ない。

ユーザーがログインすると、ユーザーをホーム コンポーネントにリダイレクトします。

しかし、URL http://localhost:3000/comp1で/ comp1を読み込もうとすると、第 2 レベルを見て、「ホーム コンポーネント」の下ではなく、ホームおよびログイン コンポーネントと一緒に /comp1 を見つけようとし、エラーをスローします。ルート '/comp1' が見つかりません。

あいまいな問題であることは理解しています。私のホームURLは「/」だからです。しかし、ホーム コンポーネントがアプリのルート レベルにあることはよくあることであり、ホーム コンポーネントのルート URL に「/home」または「/main」を追加したくない場合があります。

これを機能させる方法はありますか？

Angular 1.5 の新しいコンポーネント ルーターを使用して、兄弟コンポーネントを ng-outlet ディレクティブでレンダリングし続ける方法はありますか? 兄弟のリスト ビューと並行して詳細ビューを表示したいと考えています。公式ドキュメント ( https://docs.angularjs.org/guide/component-router ) を理解している限り、$$router を使用して子コンポーネントにバインドできるはずです。

これが私がやろうとしたことです: http://plnkr.co/edit/KzW8fLAxrte9jSg5jhEg?p=preview

このバインディング トピックに関する同様の投稿があります。

Angular 1.5 コンポーネントの $router バインディング

$canActivate には実際に 3 つの問題があります (問題をよりよく理解するために、以下のコードも参照してください)。

1. をクリックする<a ng-link="['MachineDetails', { id: 'c6bd76947fc0' }]</a>と、$canActivate から ID にアクセスできません (URL とルートはまだ変更されていないため、注入 $location または注入 $rootRouter を介して取得できません)
2. $canActivate からコントローラーにデータを渡す方法がわかりません。

3. $canActivate から ($rootRouter.navigate() を使用して) 再ルーティングできません。

   上記のコードは、ES6 で記述された私のコンポーネント定義です。

コンポーネントルーターを使用して角度のあるアプリケーションを構築したいと考えています。このアプリケーションは、2 つの異なるレイアウトで構成されています。1 つはログイン画面で、2 つのフィールド (ボタンのみ) があります。もう 1 つは、ヘッダー、サイドバー、およびコンテンツを含むメイン レイアウトです。ルートによって内容エリアが変わります。

これが私のコンポーネントツリーです:

ここにもplnkrがあります：リンク

これは、ログインとメインのルートを定義する方法です。

現在、私が現在使用しているアプローチには 2 つの大きな問題があります。

まず、メイン コンポーネント内のすべてのリンクは、ng-link を使用するときに二重スラッシュで解決されます。これは、一部のブラウザで問題が発生する可能性があると思います。

次に、私のナビゲーション コンポーネントはルート コンポーネントではなく別のコンポーネントであるため、$route にアクセスできません。したがって、$rootRouter を注入する必要があります。isRouteActive 関数を使用すると、常に true が返されます。これは、すべてのナビゲーション リンクがアクティブなクラスを取得することを意味します。